Bootstrap BootstrapDialog使用详解

这里有两种展现方式

写在前面：首先你要引入的库有
css : bootstrap.min.css bootstrap-dialog.css
js : jquery-1.11.1.min.js bootstrap.min.js bootstrap-dialog.js

1、通过html代码显示

<!-- Button trigger modal 弹出框的触发器 --> <button type="button" data-toggle="modal" data-target="#myModal"> Launch demo modal </button> <!-- Modal 弹出框的结构 --> <div tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div role="document"> <div> <div> <button type="button" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> <h4>Modal title</h4> </div> <div> ... </div> <div> <button type="button" data-dismiss="modal">Close</button> <button type="button">Save changes</button> </div> </div> </div> </div>

这种方式简单直观； 但会增加html的‘重量'，而且不够灵活，大量使用时不建议使用

2、通过js的方式展现（需要注意的地方我都写在注释里了）

（1）最简单的实现方式：

BootstrapDialog.show({ message: 'Hi Apple!' });

还有一种更简单的实现方式：BootstrapDialog.alert('I want banana!'); //异步加载 适合用在方法的最后

（2）buttons

BootstrapDialog.show({ message : "message", buttons : [{ label : "btn1", cssClass : "btn-primary" //给按钮添加类名 可以通过此方式给按钮添加样式 },{ label : "btn2", icon : "glyphicon glyphicon-ban-circle" //通过bootstrap的样式添加图标按钮 },{ label : "btn3", action : function(dialog){ //给当前按钮添加点击事件 dialog.close(); } } ] });

（3）操作title、message 可以通过 setTitle 和 setMessage 操作title和message

BootstrapDialog.show({ title : "this is a title!", //title message : "Document Comtent", buttons : [{ label : "cancel", action : function(dialog){ dialog.setTitle("title2"); //操作title dialog.setMessage("message1"); //操作message dialog.close(); } },{ label : "Ok", action : function(dialog){ dialog.close(); } }] })

（4）按钮热键 （本人认为不常用）

BootstrapDialog.show({ title: 'Button Hotkey', message: 'Try to press some keys...', onshow: function(dialog) { dialog.getButton('button-c').disable(); //通过getButton('id')获得按钮 }, buttons: [{ label: '(A) Button A', hotkey: 65, // Keycode of keyup event of key 'A' is 65. action: function() { alert('Finally, you loved Button A.'); } }, { label: '(B) Button B', hotkey: 66, action: function() { alert('Hello, this is Button B!'); } }, { id: 'button-c', label: '(C) Button C', hotkey: 67, action: function(){ alert('This is Button C but you won\'t see me dance.'); } }] })

（5）动态加载message

BootstrapDialog.show({ //message : $("<div></div>").load('content.html') //第一种方式 message : function(content){ //第二种方式 var $message = $("<div></div>"); var loadData = content.getData("contentFile"); $message.load(loadData); return $message; //一定记得返回值！ }, data : {"contentFile" :"content.html"} });

（6）控制弹出框右上角的关闭按钮

BootstrapDialog.show({ message: 'Hi Apple!', closable: true, //控制弹出框拉右上角是否显示 ‘x' 默认为true buttons: [{ label: 'Dialog CLOSABLE!', cssClass: 'btn-success', action: function(dialogRef){ dialogRef.setClosable(true); } }, { label: 'Dialog UNCLOSABLE!', cssClass: 'btn-warning', action: function(dialogRef){ dialogRef.setClosable(false); } }, { label: 'Close the dialog', action: function(dialogRef){ dialogRef.close(); //总是能关闭弹出框 } }] });

（7） 弹出框的尺寸

BootstrapDialog.show({ title: 'More dialog sizes', message: 'Hi Apple!', size : BootstrapDialog.SIZE_NORMAL //默认尺寸 buttons: [{ label: 'Normal', action: function(dialog){ dialog.setTitle('Normal'); dialog.setSize(BootstrapDialog.SIZE_NORMAL); } }, { label: 'Small', action: function(dialog){ dialog.setTitle('Small'); dialog.setSize(BootstrapDialog.SIZE_SMALL); } }, { label: 'Wide', action: function(dialog){ dialog.setTitle('Wide'); dialog.setSize(BootstrapDialog.SIZE_WIDE); } }, { label: 'Large', action: function(dialog){ dialog.setTitle('Large'); dialog.setSize(BootstrapDialog.SIZE_LARGE); } }] });