• 【转】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

  • 相关阅读:
    linux 系统函数 basename和dirname
    写linux脚本你怎么能不知道位置参数!?
    Linux 使用中history 默认记录数不够用了?
    在C/C++中常用的符号
    java23种设计模式之一: 策略模式
    工作中用到的git命令
    注解@Aspect实现AOP功能
    AOP 面向切面 记录请求接口的日志
    javaWeb导出POI创建的多个excel的压缩文件
    nginx的重试机制以及nginx常用的超时配置说明
  • 原文地址:https://www.cnblogs.com/haha12/p/4971672.html
Copyright © 2020-2023  润新知