如何使用Bootbox

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.更多讨论

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

答：

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

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

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

答：名字可以随便取的。

问题三提示框可以嵌套么？

答：可以。

问题四能不能自定义弹出框的位置？

答：可以，使用定位即可

PPT

video

如何使用Bootbox相关推荐

bootbox显示中文的按钮
$("selector").on('click',function(){ bootbox.confirm({ title : "请确认", buttons: { ...
bootbox.js
bootbox:一个弹出框插件,官网看一下例子就好了:http://bootboxjs.com/examples.html 目前来说应该只要调用bootbox.js就可以了,没有css的问题 1.有最 ...
bootstrap插件bootbox参数和自定义弹出框宽度设置
插件官方地址:http://bootboxjs.com/ alert: 1 bootbox.alert("Hello world!", function() {}); dialog ...
bootbox.js bootbox.promt()
想用bootbox做一个弹出的输入框,输入框是必填项,想看一下API,结果bootxbox.js的官网怎么也打不开.摸索了一下,发现用this可以获取整个模态框节点,这就好办了: bootbox.pr ...
bootbox.js实践总结（一）
最近使用bootstrap做后台管理系统,弹出框用到了bootbox.js,也是和bootstrap风格匹配. 在这里记录下来使用体会. 顺序依赖 jQuery.js Bootstrap(css和js ...
bootBox 提示框插件
引用地址:https://blog.csdn.net/kiwi4814/article/details/54730109 bootbox.js官方文档中文版简介:Bootbox.js是一个小型的Ja ...
bootstrap插件（对话框）bootbox参数和自定义弹出框宽度设置
参考:https://hisune.com/post/view/17/bootstrap-plugin-bootbox-and-custom-width-dialog 官网:http://bootbo ...
django+jquery ajax post csrf 配置
2019独角兽企业重金招聘Python工程师标准>>> django+jquery ajax post csrf 配置: <body> {% csrf_token %} ...
2014年最热门的国人开发开源软件TOP100
2014年最热门的国人开发开源软件TOP100 不知道从什么时候开始,很多一说起国产好像就非常愤慨,其实大可不必.做开源中国六年有余,这六年时间国内的开源蓬勃发展,从一开始的使用到贡献,到推出自己很多 ...
php接收表单图片,如何在PHP中获取表单图片数据
这是我的HTML,用于发布带图片的广告. {% for count in 1..10 %} {% endfor %} 这是我的轮廓仪功能 public function insertProduct( ...

如何使用Bootbox

如何使用Bootbox相关推荐

最新文章

热门文章