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