Bootstrap BootstrapDialog使用详解
编程学习 2021-07-04 19:20www.dzhlxh.cn编程入门
这篇文章主要为大家详细介绍了Bootstrap BootstrapDialog使用的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
这里有两种展现方式
写在前面：首先你要引入的库有
css : bootstrap.min.css bootstrap-dialog.css
js : jquery-1.11.1.min.js bootstrap.min.js bootstrap-dialog.js
1、通过html代码显示
<!-- Button trigger modal 弹出框的触发器 -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- Modal 弹出框的结构 -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
这种方式简单直观； 但会增加html的‘重量'，而且不够灵活，大量使用时不建议使用
2、通过js的方式展现（需要注意的地方我都写在注释里了）
（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();
}
}]
})
（4）按钮热键 （本人认为不常用）
BootstrapDialog.show({
title: 'Button Hotkey',
message: 'Try to press some keys...',
onshow: function(dialog) {
dialog.getButton('button-c').disable(); //通过getButton('id')获得按钮
},
buttons: [{
label: '(A) Button A',
hotkey: 65, // Keycode of keyup event of key 'A' is 65.
action: function() {
alert('Finally, you loved Button A.');
}
}, {
label: '(B) Button B',
hotkey: 66,
action: function() {
alert('Hello, this is Button B!');
}
}, {
id: 'button-c',
label: '(C) Button C',
hotkey: 67,
action: function(){
alert('This is Button C but you won\'t see me dance.');
}
}]
})
（5）动态加载message
BootstrapDialog.show({
//message : $("<div></div>").load('content.html') //第一种方式
message : function(content){ //第二种方式
var $message = $("<div></div>");
var loadData = content.getData("contentFile");
$message.load(loadData);
return $message; //一定记得返回值！
},
data : {"contentFile" :"content.html"}
});
（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);
}
}]
});
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持狼蚁SEO。
上一篇：数组Array的排序sort方法
下一篇：数组Array的一些方法(总结)