外文資料:http://nakupanda.github.io/bootstrap3-dialog/
(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(); } }] })
(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); } }] });