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

<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>

转自：http://blog.csdn.net/zh921112/article/details/41513161

posted @ 2015-11-17 14:40  Java碎碎念  阅读(9072)  评论(0)  编辑  收藏  举报