Bootstrap BootstrapDialog使用详解
这里有两种展现方式
写在前面:首先你要引入的库有
css:bootstrap.min.cssbootstrap-dialog.css
js:jquery-1.11.1.min.jsbootstrap.min.jsbootstrap-dialog.js
1、通过html代码显示
<!--Buttontriggermodal弹出框的触发器--> <buttontype="button"class="btnbtn-primarybtn-lg"data-toggle="modal"data-target="#myModal"> Launchdemomodal </button> <!--Modal弹出框的结构--> <divclass="modalfade"id="myModal"tabindex="-1"role="dialog"aria-labelledby="myModalLabel"> <divclass="modal-dialog"role="document"> <divclass="modal-content"> <divclass="modal-header"> <buttontype="button"class="close"data-dismiss="modal"aria-label="Close"><spanaria-hidden="true">×</span></button> <h4class="modal-title"id="myModalLabel">Modaltitle</h4> </div> <divclass="modal-body"> ... </div> <divclass="modal-footer"> <buttontype="button"class="btnbtn-default"data-dismiss="modal">Close</button> <buttontype="button"class="btnbtn-primary">Savechanges</button> </div> </div> </div> </div>
这种方式简单直观;但会增加html的‘重量',而且不够灵活,大量使用时不建议使用
2、通过js的方式展现(需要注意的地方我都写在注释里了)
(1)最简单的实现方式:
BootstrapDialog.show({ message:'HiApple!' });
还有一种更简单的实现方式:BootstrapDialog.alert('Iwantbanana!');//异步加载适合用在方法的最后
(2)buttons
BootstrapDialog.show({ message:"message", buttons:[{ label:"btn1", cssClass:"btn-primary"//给按钮添加类名可以通过此方式给按钮添加样式 },{ label:"btn2", icon:"glyphiconglyphicon-ban-circle"//通过bootstrap的样式添加图标按钮 },{ label:"btn3", action:function(dialog){//给当前按钮添加点击事件 dialog.close(); } } ] });
(3)操作title、message可以通过setTitle和setMessage操作title和message
BootstrapDialog.show({ title:"thisisatitle!",//title message:"DocumentComtent", 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:'ButtonHotkey', message:'Trytopresssomekeys...', onshow:function(dialog){ dialog.getButton('button-c').disable();//通过getButton('id')获得按钮 }, buttons:[{ label:'(A)ButtonA', hotkey:65,//Keycodeofkeyupeventofkey'A'is65. action:function(){ alert('Finally,youlovedButtonA.'); } },{ label:'(B)ButtonB', hotkey:66, action:function(){ alert('Hello,thisisButtonB!'); } },{ id:'button-c', label:'(C)ButtonC', hotkey:67, action:function(){ alert('ThisisButtonCbutyouwon\'tseemedance.'); } }] })
(5)动态加载message
BootstrapDialog.show({ //message:$("<div></div>").load('content.html')//第一种方式 message:function(content){//第二种方式 var$message=$("<div></div>"); varloadData=content.getData("contentFile"); $message.load(loadData); return$message;//一定记得返回值! }, data:{"contentFile":"content.html"} });
(6)控制弹出框右上角的关闭按钮
BootstrapDialog.show({ message:'HiApple!', closable:true,//控制弹出框拉右上角是否显示‘x'默认为true buttons:[{ label:'DialogCLOSABLE!', cssClass:'btn-success', action:function(dialogRef){ dialogRef.setClosable(true); } },{ label:'DialogUNCLOSABLE!', cssClass:'btn-warning', action:function(dialogRef){ dialogRef.setClosable(false); } },{ label:'Closethedialog', action:function(dialogRef){ dialogRef.close();//总是能关闭弹出框 } }] });
(7)弹出框的尺寸
BootstrapDialog.show({ title:'Moredialogsizes', message:'HiApple!', 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); } }] });
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。