這里有兩種展現方式
寫在前面：首先你要引入的庫有
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" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> Launch demo modal</button><!-- Modal 彈出框的結構 --><div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="myModalLabel">Modal title</h4> </div> <div class="modal-body"> ... </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">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); } }]});以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
