程序猿喜欢用bootstrap的model弹出框,但是这里会遇到一些麻烦,他们需要写这么一段代码:
<div class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p>One fine body…</p>
</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><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
以下操作需要先引入bootstrap.min.css、bootstrap-dialog.min.css、jquery.min.js、bootstrap.min.js、bootstrap-dialog.min.js
程序猿更喜欢的方式是这样:(直接加js,不需要再写像上面的html)
BootstrapDialog.alert('I want banana!');
举例
最简单的:
仅提供消息的展示,其他属性都保持默认。
BootstrapDialog.show({
message: 'Hi Apple!'
});
弹出框标题:
BootstrapDialog.show({
title: 'Say-hello dialog',
message: 'Hi Apple!'
});
控制标题的变化:
BootstrapDialog.show({
title: 'Default Title',
message: 'Click buttons below.',
buttons: [{
label: 'Title 1',
action: function(dialog) {
dialog.setTitle('Title 1');
}
}, {
label: 'Title 2',
action: function(dialog) {
dialog.setTitle('Title 2');
}
}]
});
控制信息的变化:
BootstrapDialog.show({
title: 'Default Title',
message: 'Click buttons below.',
buttons: [{
label: 'Message 1',
action: function(dialog) {
dialog.setMessage('Message 1');
}
}, {
label: 'Message 2',
action: function(dialog) {
dialog.setMessage('Message 2');
}
}]
});
加载远程页面(1):
这里有一些把远程页面作为消息加载的方法,下面是其中的一种。检出 remote.html
BootstrapDialog.show({
message: $('<div></div>').load('remote.html')
});
加载远程页面(2):
另一种远程加载页面到BootstrapDialog的方法:这种可定制并且更灵活,但是使用上也有点复杂。
BootstrapDialog.show({
message: function(dialog) {
var $message = $('<div></div>');
var pageToLoad = dialog.getData('pageToLoad');
$message.load(pageToLoad);
return $message;
},
data: {
'pageToLoad': 'remote.html'
}
});
按钮
BootstrapDialog.show({
message: 'Hi Apple!',
buttons: [{
label: 'Button 1'
}, {
label: 'Button 2',
cssClass: 'btn-primary',
action: function(){
alert('Hi Orange!');
}
}, {
icon: 'glyphicon glyphicon-ban-circle',
label: 'Button 3',
cssClass: 'btn-warning'
}, {
label: 'Close',
action: function(dialogItself){
dialogItself.close();
}
}]
});
操作按钮
由BootstrapDialog 创建的按钮会提供一些额外的功能:
$button.toggleEnable(true|false);
$button.enable(); // Equals to $button.toggleEnable(true);
$button.disable(); // Equals to $button.toggleEnable(false);
$button.toggleSpin(true|false);
$button.spin(); // Equals to $button.toggleSpin(true);
$button.stopSpin(); // Equals to $button.toggleSpin(false);
BootstrapDialog.show({
title: 'Manipulating Buttons',
message: function(dialog) {
var $content = $('<div><button class="btn btn-success">Revert button status right now.</button></div>');
var $footerButton = dialog.getButton('btn-1');
$content.find('button').click({$footerButton: $footerButton}, function(event) {
event.data.$footerButton.enable();
event.data.$footerButton.stopSpin();
dialog.setClosable(true);
});
return $content;
},
buttons: [{
id: 'btn-1',
label: 'Click to disable and spin.',
action: function(dialog) {
var $button = this; // 'this' here is a jQuery object that wrapping the <button> DOM element.
$button.disable();
$button.spin();
dialog.setClosable(false);
}
}]
});
按钮热键
尝试按下与下面按钮关联的键。最后一个按钮已经被禁用,所以按下是不会有效果的。请注意:如果有些主键需要对键盘进行操作,可能会发生冲突,可以尝试下面的例子:
BootstrapDialog.show({
title: 'Button Hotkey',
message: 'Try to press some keys...',
onshow: function(dialog) {
dialog.getButton('button-c').disable();
},
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.');
}
}]
});
热键冲突
尽量在代码中避免相似点
BootstrapDialog.show({
title: 'Button Hotkey',
message: $('<textarea class="form-control" placeholder="Try to input multiple lines here..."></textarea>'),
buttons: [{
label: '(Enter) Button A',
cssClass: 'btn-primary',
hotkey: 13, // Enter.
action: function() {
alert('You pressed Enter.');
}
}]
});
打开多个对话框
一个好看的堆叠对话框。请注意第二、第三个对话框是可拖拽的。
var shortContent = '<p>Something here.</p>';
var longContent = '';
for(var i = 1; i <= 200; i++) {
longContent += shortContent;
}
BootstrapDialog.show({
title: 'Another long dialog',
message: longContent
});
BootstrapDialog.show({
title: 'Another short dialog',
message: shortContent,
draggable: true
});
BootstrapDialog.show({
title: 'A long dialog',
message: longContent,
draggable: true
});
BootstrapDialog.show({
title: 'A short dialog',
message: shortContent
});
创建弹出框实例:
BootstrapDialog.show(...)只是一个构造方法,如果你需要一个弹出框实例,使用 'new'!
// Using init options
var dialogInstance1 = new BootstrapDialog({
title: 'Dialog instance 1',
message: 'Hi Apple!'
});
dialogInstance1.open();
// Construct by using setters
var dialogInstance2 = new BootstrapDialog();
dialogInstance2.setTitle('Dialog instance 2');
dialogInstance2.setMessage('Hi Orange!');
dialogInstance2.setType(BootstrapDialog.TYPE_SUCCESS);
dialogInstance2.open();
// Using chain callings
var dialogInstance3 = new BootstrapDialog()
.setTitle('Dialog instance 3')
.setMessage('Hi Everybody!')
.setType(BootstrapDialog.TYPE_INFO)
.open();
事实上BootstrapDialog.show(...)也会返回一个新建的弹出框实例。
// You can use dialogInstance later.
var dialogInstance = BootstrapDialog.show({
message: 'Hello Banana!'
});
关闭/打开多个弹出框
这个例子演示一次性打开/关闭批处理对话框。由BootstrapDialog创建的弹出框在关闭或销毁之前会在BootstrapDialog.dialogs容器里面。迭代BootstrapDialog.dialogs可以找到所有没有被销毁或关闭的弹出框。
var howManyDialogs = 5;
for(var i = 1; i <= howManyDialogs; i++) {
var dialog = new BootstrapDialog({
title: 'Dialog No.' + i,
message: 'Hello Houston, this is dialog No.' + i,
buttons: [{
label: 'Close this dialog.',
action: function(dialogRef){
dialogRef.close();
}
}, {
label: 'Close ALL opened dialogs',
cssClass: 'btn-warning',
action: function(){
// You can also use BootstrapDialog.closeAll() to close all dialogs.
$.each(BootstrapDialog.dialogs, function(id, dialog){
dialog.close();
});
}
}]
});
dialog.open();
}
有标识符的按钮
var dialog = new BootstrapDialog({
message: 'Hi Apple!',
buttons: [{
id: 'btn-1',
label: 'Button 1'
}]
});
dialog.realize();
var btn1 = dialog.getButton('btn-1');
btn1.click({'name': 'Apple'}, function(event){
alert('Hi, ' + event.data.name);
});
dialog.open();
信息类型
改变弹出框类型
var types = [BootstrapDialog.TYPE_DEFAULT,
BootstrapDialog.TYPE_INFO,
BootstrapDialog.TYPE_PRIMARY,
BootstrapDialog.TYPE_SUCCESS,
BootstrapDialog.TYPE_WARNING,
BootstrapDialog.TYPE_DANGER];
var buttons = [];
$.each(types, function(index, type) {
buttons.push({
label: type,
cssClass: 'btn-default btn-sm',
action: function(dialog) {
dialog.setType(type);
}
});
});
BootstrapDialog.show({
title: 'Changing dialog type',
message: 'Click buttons below...',
buttons: buttons
});
更大的弹出框
默认,弹出框的尺寸是 'size-normal' 或者 BootstrapDialog.SIZE_NORMAL ,但是你可以通过设置'尺寸'属性为 'size-large' or BootstrapDialog.SIZE_LARGE。
BootstrapDialog.show({
size: BootstrapDialog.SIZE_LARGE,
message: 'Hi Apple!',
buttons: [{
label: 'Button 1'
}, {
label: 'Button 2',
cssClass: 'btn-primary',
action: function(){
alert('Hi Orange!');
}
}, {
icon: 'glyphicon glyphicon-ban-circle',
label: 'Button 3',
cssClass: 'btn-warning'
}, {
label: 'Close',
action: function(dialogItself){
dialogItself.close();
}
}]
});
更多的弹出框尺寸
请注意:在Bootstrap Modal里面,指定BootstrapDialog.SIZE_WIDE等同于在CSS里面使用 'modal-lg'.
BootstrapDialog.show({
title: 'More dialog sizes',
message: 'Hi Apple!',
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);
}
}]
});
丰富的信息
BootstrapDialog 提供丰富的内容展示,所以你甚至可以在弹出框的信息里面使用一个视频剪辑。
var $textAndPic = $('<div></div>');
$textAndPic.append('Who\'s this? <br />');
$textAndPic.append('<img src="./images/pig.ico" />');
BootstrapDialog.show({
title: 'Guess who that is',
message: $textAndPic,
buttons: [{
label: 'Acky',
action: function(dialogRef){
dialogRef.close();
}
}, {
label: 'Robert',
action: function(dialogRef){
dialogRef.close();
}
}]
});
弹出框的 可关闭/不可关闭
如果属性'closable' 设置为false,那么默认的关闭动作就会被禁用,你可以通过dialog.close()关闭弹出框。
BootstrapDialog.show({
message: 'Hi Apple!',
closable: false,
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();
}
}]
});
关于关闭弹出框的其他控制
默认,当属性 'closable' 设置 true ,弹出框可以通过以下方式关闭:单击弹出框以外的区域,按下ESC键,单击弹出窗右上角的关闭图标。如果你希望弹出框只有只能通过右上角图标关闭,可尝试设置两个变量 'closeByBackdrop' 和'closeByKeyboard' 为 false。
BootstrapDialog.show({
message: 'Hi Apple!',
message: 'You can not close this dialog by clicking outside and pressing ESC key.',
closable: true,
closeByBackdrop: false,
closeByKeyboard: false,
buttons: [{
label: 'Close the dialog',
action: function(dialogRef){
dialogRef.close();
}
}]
});
禁用动画
设置属性 'animate' 为 false可以禁用打开弹出框时的动画。如果你想禁用全局性的动画,可以这么做:BootstrapDialog.configDefaultOptions({ animate: false });
BootstrapDialog.show({
message: 'There is no fading effects on this dialog.',
animate: false,
buttons: [{
label: 'Close the dialog',
action: function(dialogRef){
dialogRef.close();
}
}]
});
自动旋转的图标
懒惰的程序猿一定喜欢这样:
BootstrapDialog.show({
message: 'I send ajax request!',
buttons: [{
icon: 'glyphicon glyphicon-send',
label: 'Send ajax request',
cssClass: 'btn-primary',
autospin: true,
action: function(dialogRef){
dialogRef.enableButtons(false);
dialogRef.setClosable(false);
dialogRef.getModalBody().html('Dialog closes in 5 seconds.');
setTimeout(function(){
dialogRef.close();
}, 5000);
}
}, {
label: 'Close',
action: function(dialogRef){
dialogRef.close();
}
}]
});
弹出框拖动
当 'draggable'设为true,弹出框可以通过拖拽头部移动。如果你想改变鼠标悬停在对话框头上的光标形状,可是试试下面这行css:
.bootstrap-dialog .modal-header.bootstrap-dialog-draggable {
cursor: move;
}
控制你的弹出框
var dialog = new BootstrapDialog({
message: function(dialogRef){
var $message = $('<div>OK, this dialog has no header and footer, but you can close the dialog using this button: </div>');
var $button = $('<button class="btn btn-primary btn-lg btn-block">Close the dialog</button>');
$button.on('click', {dialogRef: dialogRef}, function(event){
event.data.dialogRef.close();
});
$message.append($button);
return $message;
},
closable: false
});
dialog.realize();
dialog.getModalHeader().hide();
dialog.getModalFooter().hide();
dialog.getModalBody().css('background-color', '#0088cc');
dialog.getModalBody().css('color', '#fff');
dialog.open();
给弹出框添加额外的css
这对特殊的对话框非常有应用效果。例如,如果你想让你的登录弹出框有一个更小的尺寸,你可以尝试下面的方法:
<style>
.login-dialog .modal-dialog {
width: 300px;
}
</style>
BootstrapDialog.show({
title: 'Sign In',
message: 'Your sign-in form goes here.',
cssClass: 'login-dialog',
buttons: [{
label: 'Sign In Now!',
cssClass: 'btn-primary',
action: function(dialog){
dialog.close();
}
}]
});
添加一个描述到您的对话框(为可访问性)
给你的弹出框添加一个元素 'aria-describedby' 为读者提高弹出框的描述。
BootstrapDialog.show({
title: 'Add Description',
message: 'The description is shown to screen readers.',
description: 'This is a Bootstrap Dialog'
});
绑定数据
var data1 = 'Apple';
var data2 = 'Orange';
var data3 = ['Banana', 'Pear'];
BootstrapDialog.show({
message: 'Hi Apple!',
data: {
'data1': data1,
'data2': data2,
'data3': data3
},
buttons: [{
label: 'See what you got',
cssClass: 'btn-primary',
action: function(dialogRef){
alert(dialogRef.getData('data1'));
alert(dialogRef.getData('data2'));
alert(dialogRef.getData('data3').join(', '));
}
}]
});
弹出框事件
请注意:如果你是使用setters配置事件程序,应使用dialog.onShow(function) 和 dialog.onHide(function).
BootstrapDialog.show({
message: 'Hello world!',
onshow: function(dialogRef){
alert('Dialog is popping up, its message is ' + dialogRef.getMessage());
},
onshown: function(dialogRef){
alert('Dialog is popped up.');
},
onhide: function(dialogRef){
alert('Dialog is popping down, its message is ' + dialogRef.getMessage());
},
onhidden: function(dialogRef){
alert('Dialog is popped down.');
}
});
阻止弹出框关闭
属性 'onhide' 给你一次机会为某些条件阻止弹出框关闭。设置 'onhide' 的回调方法返回false可以阻止弹出框关闭。在下面的例子,只有当你输入你最喜欢的水果是 'banana'才会关闭弹出框。
BootstrapDialog.show({
message: 'Your most favorite fruit: <input type="text" class="form-control">',
onhide: function(dialogRef){
var fruit = dialogRef.getModalBody().find('input').val();
if($.trim(fruit.toLowerCase()) !== 'banana') {
alert('Need banana!');
return false;
}
},
buttons: [{
label: 'Close',
action: function(dialogRef) {
dialogRef.close();
}
}]
});
更多的快捷方法
alert
BootstrapDialog.alert('Hi Apple!');
Alert添加回调函数
BootstrapDialog.alert('Hi Apple!', function(){
alert('Hi Orange!');
});
自定义弹出框的类型、标题和其他的属性
下面所示的所有选项都是可选的
BootstrapDialog.alert({
title: 'WARNING',
message: 'Warning! No Banana!',
type: BootstrapDialog.TYPE_WARNING, // <-- Default value is BootstrapDialog.TYPE_PRIMARY
closable: true, // <-- Default value is false
draggable: true, // <-- Default value is false
buttonLabel: 'Roar! Why!', // <-- Default value is 'OK',
callback: function(result) {
// result will be true if button was click, while it will be false if users close the dialog directly.
alert('Result is: ' + result);
}
});
确认
BootstrapDialog.confirm('Hi Apple, are you sure?');
确认的回调函数
BootstrapDialog.confirm('Hi Apple, are you sure?', function(result){
if(result) {
alert('Yup.');
}else {
alert('Nope.');
}
});
就像我们在alert里面做的一样,我们可以更多的控制确认弹出框
BootstrapDialog.confirm({
title: 'WARNING',
message: 'Warning! Drop your banana?',
type: BootstrapDialog.TYPE_WARNING, // <-- Default value is BootstrapDialog.TYPE_PRIMARY
closable: true, // <-- Default value is false
draggable: true, // <-- Default value is false
btnCancelLabel: 'Do not drop it!', // <-- Default value is 'Cancel',
btnOKLabel: 'Drop it!', // <-- Default value is 'OK',
btnOKClass: 'btn-warning', // <-- If you didn't specify it, dialog type will be used,
callback: function(result) {
// result will be true if button was click, while it will be false if users close the dialog directly.
if(result) {
alert('Yup.');
}else {
alert('Nope.');
}
}
});
I18N
为了提供你需要的本地信息,在使用BootstrapDialog之前重置一下信息
BootstrapDialog.DEFAULT_TEXTS[BootstrapDialog.TYPE_DEFAULT] = 'Information';
BootstrapDialog.DEFAULT_TEXTS[BootstrapDialog.TYPE_INFO] = 'Information';
BootstrapDialog.DEFAULT_TEXTS[BootstrapDialog.TYPE_PRIMARY] = 'Information';
BootstrapDialog.DEFAULT_TEXTS[BootstrapDialog.TYPE_SUCCESS] = 'Success';
BootstrapDialog.DEFAULT_TEXTS[BootstrapDialog.TYPE_WARNING] = 'Warning';
BootstrapDialog.DEFAULT_TEXTS[BootstrapDialog.TYPE_DANGER] = 'Danger';
BootstrapDialog.DEFAULT_TEXTS['OK'] = 'OK';
BootstrapDialog.DEFAULT_TEXTS['CANCEL'] = 'Cancel';
BootstrapDialog.DEFAULT_TEXTS['CONFIRM'] = 'Confirmation';