如何使用bootbox？

1.背景介绍

在JS任务6-10做萝卜多后台中我们会使用到模态框，当时我在做这个任务的时候是使用了AngularJS的ui-bootstrap中的模态框，但是使用起来真的真的很繁琐！直到后来接触到bootbox，发现原来写模态框可以如此的简单。

Bootbox.js是一个小型的JavaScript库，基于 Twitter 的 Bootstrap 开发。它允许你创建使用编程对话框。可以快速定制，创建自己所需的模态框，可以方便的更改它的样式。

Bootbox不像原生的alert等对话框，所有的Bootstrap模态框生成的都是非阻塞事件。所以 在使用confirm()对话框时，请记住这一点，因为它不是本地确认对话框的替代。 任何取决于用户选择的代码都必须放在回调函数中。

---

2.知识剖析

该库提供了模拟原生JavaScript的alert警告，confirm确认、prompt提示这三个对话框，另外Bootbox还有dialog自定义对话框。它们每个可以采取各种参数来定制标签和指定默认值，它们最基本用法如下：

alert是只有单个按钮的对话框，按ESC键或单击关闭按钮可关闭对话框。

bootbox.alert("Your message here…", function(){ /* your callback code */ }) 

• 1

Confirm是具有确定和取消按钮的对话框， 按ESC键或单击关闭将忽略对话框并调用回调函数，效果等同于单击取消按钮。 
需要注意的是，使用confirm时回调函数是必须的。

bootbox.confirm("Are you sure?", function(result){ /* your callback code */ })

• 1

prompt 是提示用户进行输入操作并确定或者取消的对话框， 按ESC键或单击关闭将忽略对话框并调用回调函数，效果等同于单击取消按钮。 同样，prompt中回调函数也是必须的。 
注意：prompt在使用options选项时需要title选项，并且不允许使用message选项。

bootbox.prompt("What is your name?", function(result){ /* your callback code */ }) 

• 1

dialog 一个完全自定义的对话框方法，它只接收一个参数 options 对象。也就是说按ESC键时，这个自定义对话框将不会自动关闭，需要使用onEscape函数手动实现此行为。

bootbox.dialog(options)

• 1

options至少要有message选项。

3.常见问题

使用Bootbox需要注意的地方有哪些？

---

4.解决方案

首先Bootbox引入的版本要正确，bootbox的所有版本都是在Bootstrap和jQuery的基础之上的，因此bootstrap，jQuery和Bootbox的版本要对应 

还有需要注意脚本引用的顺序:

• jQuery
• Bootstrap
• Bootbox

例如： 

5.编码实战

demo

---

6.扩展思考

模态框和非模态框有什么区别？ 
模态对话框：就是在其没有被关闭之前，用户不能与同一个应用程序的其他窗口进行交互，直到该对话框关闭。 
非模态对话框：当被打开时，用户既可选择和该对话框进行交互，也可以选择同应用程序的其他窗口交互。

---

7.参考文献

参考文献： 
Bootbox.js 
bootbox.js官方文档中文版

---

8.更多讨论

问题1：那个自定义按钮的名字随便起吗？ 
答：名字可以随便取的。

问题2：自定义按钮的名字是不是必须放在dialig里？ 
答：不是的，alert、comfirm、prompt和dialog都是可以自定义按钮名字的，方式参考上面的demo。

问题3：提示框可以嵌套么？ 
答：可以。