## 简介 **Bootbox.js**是一个小型的JavaScript库，基于Bootstrap模态框开发，用于创建可编程的对话框。不像原生的alert等对话框，所有的Bootstrap模态框生成的都是非阻塞事件。所以 在使用confirm()对话框时，请记住这一点，因为它不是本地确认对话框的替代。 任何取决于用户选择的代码都必须放在回调函数中。 ## Alert ~~~ // Alert是只有单个按钮的对话框，按ESC键或单击关闭按钮可关闭对话框。 bootbox.alert("Your message here…") // message中可以放html语言，比如： bootbox.alert("Your message <b>here…</b>") // 回调函数： bootbox.alert("Your message here…", function(){ /* your callback code */ }) // options选项自定义对话框: bootbox.alert({ size: "small", title: "Your Title", message: "Your message here…", callback: function(){ /* your callback code */ } }) ~~~ ## Confirm ~~~ // Confirm是具有确定和取消按钮的对话框， 按ESC键或单击关闭将忽略对话框并调用回调函数，效果等同于单击取消按钮。 // 需要注意的是，使用confirm时回调函数是必须的。 bootbox.confirm("Are you sure?", function(result){ /* your callback code */ }) // options选项： bootbox.confirm({ size: "small", message: "Are you sure?", callback: function(result){ /* result is a boolean; true = OK, false = Cancel*/ } }) ~~~ ## Prompt ~~~ // Prompt是提示用户进行输入操作并确定或者取消的对话框， 按ESC键或单击关闭将忽略对话框并调用回调函数，效果等同于单击取消按钮。 // 同样，prompt中回调函数也是必须的。 bootbox.prompt("What is your name?", function(result){ /* your callback code */ }) // options选项： bootbox.prompt({ size: "small", title: "What is your name?", callback: function(result){ /* result = String containing user input if OK clicked or null if Cancel clicked */ } }) // 注意：prompt在使用options选项时需要title选项，并且不允许使用message选项。 ~~~ ## Custom Dialog ~~~ // 一个完全自定义的对话框方法，它只接收一个参数 - options对象。也就是说按ESC键时，这个自定义对话框将不会自动关闭，需要使用onEscape函数手动实现此行为。 // options至少要有message选项，这时候将会出现一个不可撤销的对话框，一般用作“loading”界面 bootbox.dialog({ message: '<div class="text-center"><i class="fa fa-spin fa-spinner"></i> Loading...</div>' }) // options选项参数详解 1. message 类型：String | Element 描述：显示在对话框上的内容 必需：alert | confirm | custom dialogs 2. title 类型：String | Element 描述：为对话框添加标题，默认大小为<h4> 必需：prompts 3. callback 类型：Function 描述：回调函数 注意1：alert回调不提供参数，函数体为空则会被忽略，如： bootbox.alert({ message: "I'm an alert!", callback: function() {} }) 注意2：confirm和prompt回调必须提供参数result。当为confirm时，result类型为boolean，用来判定是还是否；当为prompt时result将保存用户输入的值，如： bootbox.confirm("Are you sure?", function(result) { // result will be true or false }); bootbox.prompt("What is your name?", function(result) { if (result === null) { // Prompt dismissed } else { // result has a value } }); 必需：confirm | prompt 4. onEscape 类型：Boolean | Function 描述：允许用户通过点击ESC来关闭对话框，点击ESC这将调用此选项。 默认值 : alert | confirm | prompt : true ; custom dialogs : null 必需：alert | confirm | custom dialogs 5. show 类型：Boolean 描述：是否立即显示对话框 默认值 : null 6. backdrop 类型：Boolean 描述：对话框是否有背景，还可以确定点击背景是否退出模态。 Undefined (null) 显示背景，点击背景不会触发事件 true * 显示背景，点击背景会取消此对话框 false 不显示背景 注意：当此值设置为true时，仅当onEscape设置esc也可以关闭时，对话框才会关闭 默认值 : null 7. closeButton 类型：Boolean 描述：对话框是否显示关闭按钮 默认值 : true 8. animate 类型：Boolean 描述：显示动画效果（需要浏览器支持） 默认值 : true 9. className 类型：String 描述：为对话框增加额外的css文件 默认值 : null 10. size 类型：String 描述：将Bootstrap模态大小类添属性加到对话框包装器，有效值为'large'和'small'，需要Bootstrap 3.1.0以上。 默认值 : null 11. buttons 类型：Object 描述：按钮被定义为JavaScript对象。 注1：定义按钮的最小定义是:"Your button text": function(){} 注2：你可以设置的其他属性有： buttonName : { label: 'Your button text', className: "some-class", callback: function() { } } 注3：其中buttoName应为： alert => ok confirm => cancel, confirm prompt => cancel, confirm 注4：每个可用的按钮选项都可以被重写，以使用自定义内容（文本或HTML）和CSS样式。 例如： bootbox.confirm({ message: "This is a confirm with custom button text and color! Do you like it?", buttons: { confirm: { label: 'Yes', className: 'btn-success' }, cancel: { label: 'No', className: 'btn-danger' } }, callback: function (result) { // ... } }); 注：您不能重写alert，confirm和prompt对话框的按钮的回调。 默认值 : null