Bootstrap弹出框bootboxjs

官网

bootstrap的弹出框

  1 <html>
  2 <head>
  3     <meta charset="utf-8">
  4     <meta name="viewport" content="width=device-width, initial-scale=1">
  5     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6     <title>bootbox自定义dialog、confirm、alert样式，基本全局设置方法setDefaults</title>
  7     <link href="http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
  8     <style>
  9         .btn-myStyle {
 10             background-color: #2c3e50;
 11             color: #fff;
 12         }
 13 
 14             .btn-myStyle:hover, .btn-myStyle:focus {
 15                 color: #fff;
 16                 text-decoration: none;
 17             }
 18     </style>
 19 </head>
 20 <body>
 21     <button id="test" class="btn btn-default">测试</button>
 22     <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
 23     <script src="http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
 24     <script src="http://bootboxjs.com/bootbox.js"></script>
 25     <script>
 26         $(document).ready(function() {
 27             //bootbox.setDefaults({
 28                 /**
 29                 * @optional String
 30                 * @default: en
 31                 * which locale settings to use to translate the three
 32                 * standard button labels: OK, CONFIRM, CANCEL
 33                 */
 34                 //locale: "fr",
 35                 /**
 36                 * @optional Boolean
 37                 * @default: true
 38                 * whether the dialog should be shown immediately
 39                 */
 40                 //show: true,
 41                 /**
 42                 * @optional Boolean
 43                 * @default: true
 44                 * whether the dialog should be have a backdrop or not
 45                 */
 46                 //backdrop: true,
 47                 /**
 48                 * @optional Boolean
 49                 * @default: true
 50                 * show a close button
 51                 */
 52                 //closeButton: true,
 53                 /**
 54                 * @optional Boolean
 55                 * @default: true
 56                 * animate the dialog in and out (not supported in < IE 10)
 57                 */
 58                 //animate: true,
 59                 /**
 60                 * @optional String
 61                 * @default: null
 62                 * an additional class to apply to the dialog wrapper
 63                 */
 64                 //className: "my-modal"
 65             //});
 66         });
 67 
 68 
 69         $(document).on("click", "#test", function (e) {
 70             //bootbox.confirm("Hello world!", function (result) {
 71             //    if(result) {
 72             //        alert('点击了确认按钮');
 73             //    } else {
 74             //        alert('点击了取消按钮');
 75             //    }
 76             //});
 77             //bootbox.dialog({
 78             //    message: "I am a custom confirm",
 79             //    title: "Confirm title",
 80             //    buttons: {
 81             //        Cancel: {
 82             //            label: "Cancel",
 83             //            className: "btn-default",
 84             //            callback: function () {
 85             //                alert("Cancel");
 86             //            }
 87             //        }
 88             //        , OK: {
 89             //            label: "OK",
 90             //            className: "btn-primary",
 91             //            callback: function () {
 92             //                alert("OK");
 93             //            }
 94             //        }
 95             //    }
 96             //});
 97 
 98         //bootbox.confirm({
 99         //buttons: {
100         //    confirm: {
101         //        label: '我是确认按钮',
102         //        className: 'btn-myStyle'
103         //    },
104         //    cancel: {
105         //        label: '我是取消按钮',
106         //        className: 'btn-default'
107         //    }
108         //},
109         //message: '提示信息',
110         //callback: function(result) {
111         //    if(result) {
112         //        alert('点击确认按钮了');
113         //    } else {
114         //        alert('点击取消按钮了');
115         //    }
116         //},
117         //title: "bootbox confirm也可以添加标题哦",
118         //});
119 
120         bootbox.alert({
121             buttons: {
122                ok: {
123                     label: '我是ok按钮',
124                     className: 'btn-myStyle'
125                 }
126             },
127             message: '提示信息',
128             callback: function() {
129                 alert('关闭了alert');
130             },
131             title: "bootbox alert也可以添加标题哦",
132         });
133        });
134 
135     </script>
136 </body>
137 </html>

 

posted @ 2017-07-05 18:44  Cein  阅读(5288)  评论(0)  编辑  收藏  举报