demo/JS-04-HowtoUseBootbox/demo.html

<!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警告框

//        最基础用法
//        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>