Bootstrap BootstrapDialog使用详解

这里有两种展现方式写在前面：首先你要引入的库有css:bootstrap.min.cssbootstrap-dialog.cssjs:jquery-

这里有两种展现方式

写在前面：首先你要引入的库有 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);
 }
 }]
});

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

Bootstrap BootstrapDialog