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);
}
}]
});
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。