(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();
}
}]
})
(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);
}
}]
});
https://www.jb51.net/article/105853.htm
BootstrapDialog.show - 提示信息对话框
原文:https://www.cnblogs.com/zhangguorenmi/p/13137820.html