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 >测试</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>- 上一篇 »JavaScript 弹出框:警告，alert、确认
- 下一篇 »JavaScript弹出框
