1.背景介绍

写网页的时候，有很多的地方都有用到弹出模拟框的效果，弹出模拟框带有默认的效果。默认的弹出模拟框有一定的局限性：界面不美观，功能实现较复杂。

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

2.知识剖析

该库提供了三个旨在模仿其原生JavaScript等效项的函数。它们确切的函数名是灵活的，因此每个可以采取各种参数来定制标签和指定默认值，但它们最基本是这样：

警告

                    
                        bootbox.alert(message, callback)
                    
                

提示

                    
                        bootbox.prompt(message, callback)
                    
                

确认

                    
                        bootbox.confirm(message, callback)
                    
                

Bootbox库还提供了一个自定义模态框的函数，你也可以使用它来创建自己的自定义对话框：

                    
                        bootbox.dialog(options)
                    
                

bootbox的引入

bootbox的所有版本都是在Bootstrap和jQuery的基础之上编写的，因此，使用 bootbox，还要引入jQuery和bootbox。引入需要注意两点

第一，bootstrap，jQuery和bootbox的版本要对应

第二，注意引用的顺序

对应版本

引入顺序

<1>jQuery

<2>Bootstrap

<3>Bootbox

        
               $(".demo").click(function () {
//        alert警告框

//         原生警告框
//         alert("按钮被点击")

//         最基础用法
//        bootbox.alert("你已点击按钮");

//        带回调函数
//        bootbox.alert("你已点击按钮",function () {
//            $(".demo").css("background","skyblue")
//        });


//        带回调函数的另一种写法
//        bootbox.alert({
//            message: "你已点击按钮",
//            callback: function () {
//                $(".demo").css("background","skyblue");
//            }
//        });

//        不带回调函数
//        bootbox.alert("你已点击按钮");
//        function bg() {
//            $(".demo").css("background","skyblue")
//        }
//        bg();

//        改变弹出框的大小
//        bootbox.alert({
//            message: "你已点击按钮",
////            size: "small"
//            size: "large"
//        });

//        点击背景退出
//        bootbox.alert({
//            message: "你已点击按钮",
//            backdrop: true
//        });


//prompt提示框（带input输入框的弹出框）

//        基本输入提示框
//        bootbox.prompt("我是标题",function(result){ $("#test").append("你输入的是：" + result); });

//        带文本输入的提示框
//        bootbox.prompt({
//            title: "请输入文本信息",
//            inputType: 'textarea',
//            callback: function (result) {
//                $("#test").append("你的输入的文本是："+ result);
//            }
//        });

//        带选项的提示框
//        bootbox.prompt({
//            title: "请选择",
//            inputType: 'checkbox',
//            inputOptions: [
//                {
//                    text: 'Choice One',
//                    value: '1'
//                },
//                {
//                    text: 'Choice Two',
//                    value: '2'
//                },
//                {
//                    text: 'Choice Three',
//                    value: '3'
//                }
//            ],
//            callback: function (result) {
//                $("#test").append("你的选择是："+ result);
//            }
//        });

//        带日期输入的提示框
//        bootbox.prompt({
//            title: "请选择日期",
//            inputType: 'date',
//            callback: function (result) {
//                $("#test").append("你选择的日期是："+ result);
//            }
//        });
//        带邮件输入的提示框
//        bootbox.prompt({
//            title: "请输入邮箱",
//            inputType: 'email',
//            callback: function (result) {
//                $("#test").append("你输入的邮箱是："+ result);
//            }
//        });

//          带数字输入的提示框
//        bootbox.prompt({
//            title: "请输入数字",
//            inputType: 'number',
//            callback: function (result) {
//                $("#test").append("你输入的数字是："+ result);
//            }
//        });

//        带密码输入的提示框
//        bootbox.prompt({
//            title: "请输入密码",
//            inputType: 'password',
//            onEscape: false,
//            callback: function (result) {
//                $("#test").append("你输入的密码是："+ result);
//            }
//        });

//        带下拉选项的提示框
//        bootbox.prompt({
//            title: "This is a prompt with select!",
//            inputType: 'select',
//            inputOptions: [
//                {
//                    text: 'Choose one...',
//                    value: ''
//                },
//                {
//                    text: 'Choice One',
//                    value: '1'
//                },
//                {
//                    text: 'Choice Two',
//                    value: '2'
//                },
//                {
//                    text: 'Choice Three',
//                    value: '3'
//                }
//            ],
//            callback: function (result) {
//                $("#test").append("你的选择是："+ result);
//            }
//        });

//        带时间输入的提示框
//        bootbox.prompt({
//            title: "请选择时间",
//            inputType: 'time',
//            callback: function (result) {
//                $("#test").append("你选择的时间是："+ result);
//            }
//        });


//        confirm确认框
//        基础使用方法
//        bootbox.confirm("点击确认或取消", function(result){ $("#test").append("你选择的是："+ result); });

//        自定义按钮文字和颜色
//        bootbox.confirm({
//            message: "点击确认或取消",
//            buttons: {
//                confirm: {
//                    label: '确认',
//                    className: 'btn-success'
//                },
//                cancel: {
//                    label: '取消',
//                    className: 'btn-danger'
//                }
//            },
//            callback: function (result) {
//                $("#test").append("你选择的是："+ result);
//            }
//        });

//        更复杂的确认选框
//        bootbox.confirm({
//            title: "杀死他?",
//            message: "你确定要杀死该玩家？杀死后无法撤销！",
//            buttons: {
//                cancel: {
//                    label: ' 取消'
//                },
//                confirm: {
//                    label: ' 确定'
//                }
//            },
//            callback: function (result) {
//                $("#test").append("你选择的是："+ result);
//            }
//        });

//        自定义模态框
//        bootbox.dialog({
//            message: '
Please wait while we do something...
',
//            closeButton: false,
//            backdrop:true,
//            onEscape:true
//        });


    })