Bootstrap BootstrapDialog使用详解

Bootstrap BootstrapDialog使用详解

这里有两种展现方式

写在前面：首先你要引入的库有

css : bootstrap.min.css bootstrap-dialog.css

js : jquery-1.11.1.min.js bootstrap.min.js bootstrap-dialog.js

1、通过html代码显示

Launch demo modal

×

...

Close

Save changes

这种方式简单直观； 但会增加html的‘重量'，而且不够灵活，大量使用时不建议使用

2、通过js的方式展现（需要注意的地方我都写在注释里了）

（1）最简单的实现方式：

BaKFfcT

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.setTitleBaKFfcT("title2"); //操作title

dialog.setMessage("message1"); //操作message

dialog.close();

}

},{

label : "Ok",

action : function(dialog){

BaKFfcT 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 : $("

message : function(content){ //第二种方式

var $message = $("

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){

BaKFfcT 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);

}

}]

});

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。