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}}