如何使用Bootbox

最新推荐文章于 2020-06-16 14:13:47 发布

「已注销」

最新推荐文章于 2020-06-16 14:13:47 发布

阅读量2.2k

点赞数

本文链接：https://blog.csdn.net/happiness2018/article/details/80948504

版权

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的版本要对应

第二，注意引用的顺序

对应版本

Bootbox version	Min. Bootstrap version	Max. Bootstrap	Min. jQuery
4.x.x Latest	3.0.0	3.3.x	1.9.1
3.x.x	2.2.2	2.3.2	1.8.3
2.x.x	2.0.0	2.0.4	1.7.1
1.x.x	1.3.0	1.4.0	1.7.1

引入顺序

<1>jQuery

<2>Bootstrap

<3>Bootbox

例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <style>
        .demo{
            display: block;
            margin: 500px auto 0 auto;
            width: 100px;
            height: 50px;
            font-size: 20px;
        }
    </style>
</head>
<body>
<p id="test"></p>

<button class="demo">按钮</button>

<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/4.4.0/bootbox.min.js"></script>
<script>
    $(".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: '<i class="glyphicon glyphicon-remove"></i> 取消'
//                },
//                confirm: {
//                    label: '<i class="glyphicon glyphicon-ok"></i> 确定'
//                }
//            },
//            callback: function (result) {
//                $("#test").append("你选择的是："+ result);
//            }
//        });

//        自定义模态框
//       bootbox.dialog({
//           message: '<p class="text-center">Please wait while we do something...</p>',
//           closeButton: false,
//           backdrop:true,
//           onEscape:true
//       });


    })
</script>
</body>
</html>

3.常见问题

4.解决方案

5.编码实战

6.扩展思考

7.参考文献

Bootbox官网

8.更多讨论

问题一模态框和非模态框有什么区别？

答：

模态对话框：就是在其没有被关闭之前，用户不能与同一个应用程序的其他窗口进行交互，直到该对话框关闭。

非模态对话框：当被打开时，用户既可选择和该对话框进行交互，也可以选择同应用程序的其他窗口交互。

问题二那个自定义按钮的名字随便起吗？