web前段 弹出小例子

 

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

1.

 $(document).on("click", "#test", function(e) {
            bootbox.confirm("Hello world!", function(result) {
                if (result) {
                    alert('点击了确认按钮');
                } else {
                    alert('点击了取消按钮');
                }
            });
        });

 

2.

 $(document).on("click", "#test", function(e) {
            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");
                        }
                    }
                }
            });
        });

效果图：

3.

 $(document).on("click", "#test", function(e) {
            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也可以添加标题哦",
             });
           });

效果图：

4.

 $(document).on("click", "#test", function (e)
        {
              bootbox.alert({
                      buttons: {
                          ok: {
                              label: '我是ok按钮',
                              className: 'btn-myStyle'
                          }
                      },
                      message: '提示信息',
                      callback: function () {
                          alert('关闭了alert');
                      },
                      title: "bootbox alert也可以添加标题哦",
                });
              });

效果图：

posted @ 2016-05-13 11:42  每天进步一点点！  阅读(292)  评论(0)  编辑  收藏  举报