bootbox自定义dialog、confirm、alert样式，以及基本设置方法setDefaults中可用参数

来源：互联网发布：域名证书怎么查询编辑：程序博客网时间：2024/06/05 02:06
<html><head>    <meta charset="utf-8">    <meta name="viewport" content="width=device-width, initial-scale=1">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <title>bootbox自定义dialog、confirm、alert样式，基本全局设置方法setDefaults</title>    <link href="http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" /><style>.btn-myStyle{ background-color: #2c3e50; color:#fff}.btn-myStyle:hover,.btn-myStyle:focus{color:#fff;text-decoration: none;}</style></head><body>    <button id="test" class="btn btn-default">测试</button>    <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>    <script src="http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>    <script src="http://bootboxjs.com/bootbox.js"></script>    <script>$(document).ready(function() {//bootbox.setDefaults({/*** @optional String* @default: en* which locale settings to use to translate the three* standard button labels: OK, CONFIRM, CANCEL*///locale: "fr",/*** @optional Boolean* @default: true* whether the dialog should be shown immediately*///show: true,/*** @optional Boolean* @default: true* whether the dialog should be have a backdrop or not*///backdrop: true,/*** @optional Boolean* @default: true* show a close button*///closeButton: true,/*** @optional Boolean* @default: true* animate the dialog in and out (not supported in < IE 10)*///animate: true,/*** @optional String* @default: null* an additional class to apply to the dialog wrapper*///className: "my-modal"//}); });        $(document).on("click", "#test", function (e) {            /*bootbox.confirm("Hello world!", function (result) {if(result) {alert('点击了确认按钮');} else {alert('点击了取消按钮');}            });            bootbox.dialog({                message: "I am a custom confirm",                title: "Confirm title",                buttons: {                    Cancel: {                        label: "Cancel",                        className: "btn-default",                        callback: function () {                            alert("Cancel");                        }                    }                    , OK: {                        label: "OK",                        className: "btn-primary",                        callback: function () {                            alert("OK");                        }                    }                }            });    bootbox.confirm({buttons: {confirm: {label: '我是确认按钮',className: 'btn-myStyle'},cancel: {label: '我是取消按钮',className: 'btn-default'}},message: '提示信息',callback: function(result) {if(result) {alert('点击确认按钮了');} else {alert('点击取消按钮了');}},//title: "bootbox confirm也可以添加标题哦",    });*/    bootbox.alert({    buttons: {   ok: {    label: '我是ok按钮',    className: 'btn-myStyle'    }    },    message: '提示信息',    callback: function() {    alert('关闭了alert');    },    title: "bootbox alert也可以添加标题哦",    });       });    </script></body></html>
0 0