显示目录

Bootstrap 模态对话框

Bootstrap 的对话框用起来比较繁复,例如

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<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-dialog 达到相同的效果只需要 BootstrapDialog.alert('I want banana!'),不用写 HTML 代码,插件里已经写了。

常用对话框

1
2
BootstrapDialog.alert('Hi Apple!');
BootstrapDialog.confirm('Hi Apple, are you sure?');
1
2
3
4
5
6
7
8
9
10
11
12
BootstrapDialog.confirm({
title: 'WARNING',
message: 'Warning! Drop your banana?',
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.');
}
}
});
1
2
3
4
5
6
7
8
9
10
11
BootstrapDialog.confirm({
title: '注意',
message: '确定要删除吗?',
type: BootstrapDialog.TYPE_DANGER,
btnCancelLabel: '取消',
btnOKLabel: '确定',
callback: function(result) {
if(result) {
}
}
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
BootstrapDialog.show({
title: 'Gut',
message: 'Hello world!',
type: BootstrapDialog.TYPE_WARNING,
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.');
}
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
BootstrapDialog.show({
title: '选择文件夹',
message: $('#directories').show(),
buttons: [{
label: '取消',
action: function(dialogRef) {
dialogRef.close();
}
}, {
label: '确定',
cssClass: 'btn-primary',
action: function(dialogRef) {
dialogRef.close();
}
}]
});

更多例子和文档请参考 bootstrap-dialog