Bootbox是一个很小的jQuery插件，用于使用Twitter的引导框架创建警报、确认和灵活的对话框。

目前使用最新的Bootstrap 5、Bootstrap 4和Bootstrap 3框架。

该库公开了三种旨在模仿其原生JavaScript等价物的方法。它们的确切方法签名是灵活的，因为每个方法签名都可以使用各种参数来自定义标签和指定默认值，但它们最常见的名称是这样的：

• bootbox.aalert（消息，回调）
• bootbox.promppt（消息，回调）
• bootbox.confirm（消息，回调）

请参阅实际操作：

参见：

• 移动友好引导4模式与jQuery-引导fs模式
• 程序引导4模式生成器-DynModal
• 使用额外功能扩展Bootstrap 4 Modal-jQuery Modal js
• 带jQuery的Bootstrap 4模态包装插件
• 在jQuery中创建动态引导4模式-引导显示模式.js
• Easy Bootstrap 4 Modal Creator与jQuery-Modal_maker
• 动态引导4模式管理器-jQuery bsModal

您可能还喜欢：

• 轻量级模态对话框插件-SimpleModal
• 现代模态对话框-ModalBox
• 强大的jQuery对话框插件-Zebra_Dialog
• 模态对话框Windows插件-leanModal
• SimpleModal-漂亮的弹出窗口插件

如何使用它:

1.包括jQuery库和Bootbox.js插件的文件。

<script src="/path/to/jquery.min.js"></script> 
<!-- Bootbox Without Locals -->
<script src="dist/bootbox.min.js"></script>
<!-- Locals -->
<script src="dist/bootbox.locales.min.js"></script>
<!-- Bootbox With Locals -->
<script src="dist/bootbox.all.min.js"></script>

2.包括最新的Bootstrap框架。

<link rel="stylesheet" href="/path/to/bootstrap.min.css">
<script src="/path/to/bootstrap.min.js"></script> 

3.创建一个警报弹出框。

bootbox.alert("Alert!", function(){
  // optional callback
});
// or
bootbox.alert({
  size: "small",
  title: "Dialog Title",
  message: "Your message here…",
  callback: function(){}
})

4.创建一个确认弹出框。

bootbox.confirm("Are you sure?", function(result){ 
  alert('confirmed') 
})
// or
bootbox.confirm({
  size: "small",
  message: "Are you sure?",
  callback: function(result){ 
    alert('confirmed') 
  }
})

5.创建一个提示弹出框。

bootbox.prompt("What is your name?", function(result){ 
  // do something
})
// or
bootbox.prompt({
  value: '', // initial value
  inputType: 'input', // any form elements
  inputOptions: {},
  min: null, // min value
  max: null, // max value
  step: null, // step size
  maxlength: null, // max length
  pattern: '', // require the input value to follow a specific format
  placeholder: '',
  required: true, // if is required
  multiple: false, // allows users to select more than one option when using the select input type
  size: "small",
  title: "What is your name?",
  callback: function(result){ 
    // result = String containing user input if OK clicked or null if Cancel clicked
  }
})

6.创建一个自定义弹出框。

bootbox.dialog({
  message: 'HTML content here',
  // more options here
})

7.具有默认值的全局选项。

bootbox.dialog({
 
  // dialog message
  message: 'HTML content here',
 
  // title
  title: 'dialog title',
 
  // shows the dialog immediately
  show: true,
 
  // default language
  locale: 'en',
 
  // dialog container
  container: 'body',
 
  // default value (used by the prompt helper)
  value: '',
 
  // default input type (used by the prompt helper)
  inputType: 'text',
 
  // enables backdrop or not
  backdrop: null,
 
  // shows close button
  closeButton: true,
 
  // enables animations or not
  animate: true,
 
  // extra CSS class
  className: null,
 
  // dialog size
  size: 'small',
 
  // flips the order in which the buttons are rendered, from cancel/confirm to confirm/cancel
  swapButtonOrder: false,
 
  // adds the the modal-dialog-centered to the doalog
  centerVertical: false,
 
  // Append "multiple" property to the select when using the "prompt" helper
  multiple: false,
 
  // Automatically scroll modal content when height exceeds viewport height
  scrollable: false
 
  // dismisses the dialog by hitting ESC
  onEscape: true,
 
  // custom action buttons
  buttons: {},
 
  // callback
  callback: function(){},
 
  // the element that triggered the dialog opening
  relatedTarget: null,
  
})

8.该插件还支持超过42个本地插件。

• 阿拉伯语
• 阿塞拜疆语
• bg保加利亚语
• 捷克语
• 丹麦语
• 德语
• 希腊语
• 英语
• 西班牙语/西班牙语
• 爱沙尼亚语
• 欧盟巴斯克
• 波斯语/波斯语
• 芬兰语
• 法语/法语
• 他是希伯来语
• 克罗地亚语
• 匈牙利语
• 印尼语
• 它是意大利语
• 日语
• 格鲁吉亚语
• 韩国
• 立陶宛语
• 拉脱维亚语
• 荷兰文
• 挪威语
• 波兰语
• 葡萄牙语
• pt BR葡萄牙语（巴西）
• 俄语
• 斯洛伐克语
• 斯洛文尼亚语
• 阿尔巴尼亚语
• 瑞典文
• 斯瓦希里语
• 泰米尔语
• 泰国
• 土耳其语
• 乌克兰语
• 越南语
• zh-CN中文（中华人民共和国）
• zh-TW中文（台湾/中华民国）

bootbox.dialog({
 
  locale: 'en'
 
})

9.确定弹出框是否可重复使用。默认值：false。

bootbox.dialog({
  // whether or not to destroy the modal on hide
  reusable: false
})

10.API方法。

// sets options
bootbox.setDefaults({
  // options here
});
 
// sets local
bootbox.setLocale('en');
 
// adds local
bootbox.addLocale(String name, object values);
 
// removes local
bootbox.removeLocale(String name);
 
// hides all dialog boxes
bootbox.hideAll();

更新日志：

• 修复了linting错误并添加了null检查

v.5.3版本（2022-04-28）

• 添加relatedTarget选项。允许调用者确定哪个元素（如果有的话）触发了模态
• 各种错误修复和软件包更新

v.5.2版本（2020-11-30）

• 添加越南语区域设置

第5.1版（2020-10-11）

• 添加了可重用选项，该选项允许重用Bootbox模态的实例。

版本4.1（2020-09-29）

• 更新到背景选项

版本5.0.0（2020-01-08）

• 为Bootstrap的模态事件添加挂钩：onShow、onShown、onHide和onHidden。

第3.2版（2019-11-04）

• 修复步骤属性的错误值验证

v.3.2（2019年8月21日）

• 添加格鲁吉亚语区域设置

v.2.0版本（2019-07-14）

• 将对话框修改为仅处理已定义的按钮回调

v1.3版本（2019-05-07）

• 添加斯瓦希里语区域设置。

v5.1.2（2019年4月19日）

• 将bootbox.all.js添加到src目录，作为错误构建的串联文件的临时解决方案

v.1.1（2019年4月15日）

• 将inputType设置为textarea时，添加行作为提示选项。
• 添加可滚动选项以支持Bootstrap的新可滚动模式选项
• 添加超大尺寸选项
• 为每个大小选项添加别名：sm、lg和xl

v5.0.0版本（2019-04-04）

• 添加泰米尔语区域设置

v5.0.0版本（2019-02-28）

• 更新为Bootstrap 4。

2018-03-22

• 使用.triger（）代替jQuery事件简写

v4.4.0版（2017-09-05）

• 允许true和false的背景选项来消除模态
• 在回调中将对话框作为此值传递
• 引导程序3.3.2兼容性
• jQuery 1.11.2兼容性
• 添加对maxlength提示输入属性的支持
• 优雅地检测到缺少引导程序库而不是崩溃
• 显示自定义区域设置的addLocale和removeLocare
• 显示setLocale帮助程序以选择区域设置，而不是使用setDefaults（“locale”，…）
• 添加匈牙利语言环境
• 添加克罗地亚语言环境
• 添加保加利亚语言环境
• 添加泰语区域设置
• 添加波斯语区域设置
• 添加阿尔巴尼亚语言环境

第3.2.0版（2013-04-09）

• 确保onEscape处理程序正确返回回调值（GH-91）
• 确保单击“关闭”按钮调用onEscape处理程序（如果存在）

预览截图

Bootstrap jQuery对话框插件 Bootbox