BootstrapDialog.show - 提示信息對話框


 外文資料: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); } }] });

https://www.jb51.net/article/105853.htm


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM