bootstrap-dialog的使用

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         body{height: 500px}
 8         .ceshi{height: 100px;width:300px;background:#f45;}
 9     </style>
10 
11     <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
12     <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.5/css/bootstrap-dialog.min.css" rel="stylesheet" type="text/css" />
13 </head>
14 <body>
15 <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
16 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
17 <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.5/js/bootstrap-dialog.min.js"></script>
18 
19 <script>
20 function oalertq(){
21     BootstrapDialog.show({
22         title: 'Default Title1',
23         message: 'Click buttons below2.',
24         buttons: [{
25             label: 'Title 13',
26             action: function(dialog) {
27                 dialog.setTitle('Title 13');
28             }
29         }, {
30             label: 'Title 24',
31             action: function(dialog) {
32                 dialog.setTitle('Title 24');
33             }
34         }]
35     });
36 }
37     $(function(){
38        $("<div>hhh</div>").addClass("ceshi").appendTo("body").click(function(){
39            oalertq()
40        })
41     })
42 </script>
43 </body>
44 </html>

a、首先需要引入插件文件，

bootstrap-dialog.min.css  和

bootstrap-dialog.min.js 在jquery和bootstrap的引入前提下

b、此方法封装在了BootstrapDialog对象里面，在相应的地方调用对象的方法即可，比较常用的时show方法，可以传入参数，

连接地址：http://my.oschina.net/xiaoxiangdaizi/blog/486366?p={{page}}

坚持下去就能成功