bootstrap3-dialog 使用模態對話框
<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 -->
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
這種使用的方式鍵值是太不方便了澀！
2. 所以就產生了一種簡單的方式進行處理
BootstrapDialog.show({
message: 'Hi Apple!'
});
1
2
3
很多的默認的參數，簡化了我們的操作的手段
其實創建後的結果，和我們第一步看到的那種是一樣的，只是簡化了我們的書寫步驟！
如下，是一些參數
BootstrapDialog.defaultOptions = {
type: BootstrapDialog.TYPE_PRIMARY,
size: BootstrapDialog.SIZE_NORMAL,
cssClass: '',
title: null,
message: null,
nl2br: true,
closable: true,
closeByBackdrop: true,
closeByKeyboard: true,
closeIcon: '×',
spinicon: BootstrapDialog.ICON_SPINNER,
autodestroy: true,
draggable: false,
animate: true,
description: '',
tabindex: -1,
btnsOrder: BootstrapDialog.BUTTONS_ORDER_CANCEL_OK
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
以及我們可以覆蓋一些默認的時間
var BootstrapDialog = function (options) {
this.defaultOptions = $.extend(true, {
id: BootstrapDialog.newGuid(),
buttons: [],
data: {},//保存的數據在dialog
onshow: null,//打開之前
onshown: null,//打開完成
onhide: null,//關閉之前
onhidden: null//關閉完成
}, BootstrapDialog.defaultOptions);
this.indexedButtons = {};
this.registeredButtonHotkeys = {};
this.draggableData = {
isMouseDown: false,
mouseOffset: {}
};
this.realized = false;
this.opened = false;
this.initOptions(options);
this.holdThisInstance();
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
創建按鈕
// Button on click
$button.on('click', {dialog: this, $button: $button, button: button}, function (event) {
var dialog = event.data.dialog;
var $button = event.data.$button;
var button = $button.data('button');
if (button.autospin) {
$button.toggleSpin(true);
}
if (typeof button.action === 'function') {
return button.action.call($button, dialog, event);
}
});
1
2
3
4
5
6
7
8
9
10
11
12
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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
加載遠程的數據信息，這個時候使用ajax 的load去加載遠程的數據，我們還可以使用data[]這個數據存放數據
getData(key) Get data entry according to the given key, returns null if no data entry found. 這個是我們默認參數中存放的一些數據，我們可以放置一些數據信息，比如Url的連接等等，或者一些其他的數據 這種公用的方法還有很多的，文檔中很詳細。
http://nakupanda.github.io/bootstrap3-dialog/
getData: function (key) {
return this.options.data[key];
},
1
2
3
獲得遠程的數據，而不是寫在本地上面的數據信息哦！
BootstrapDialog.show({
message: $('<div></div>').load('remote.html')
});
1
2
3
4
BootstrapDialog.show({
message: function(dialog) {
var $message = $('<div></div>');
var pageToLoad = dialog.getData('pageToLoad');
$message.load(pageToLoad);
return $message;
},
data: {
'pageToLoad': 'remote.html'
}
});
1
2
3
4
5
6
7
8
9
10
11
12
13
dialog實例的初始化，獲得實例的例子很多
BootstrapDialog.show(…) is just a shortcut method, if you need dialog instances, use ‘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();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
這個下面也是可以的，但是在自己自動的打開了對話框了
// You can use dialogInstance later.
var dialogInstance = BootstrapDialog.show({
message: 'Hello Banana!'
});
1
2
3
4
5
設置type 只是頭不同而已css不一樣
var types = [BootstrapDialog.TYPE_DEFAULT,
BootstrapDialog.TYPE_INFO,
BootstrapDialog.TYPE_PRIMARY,
BootstrapDialog.TYPE_SUCCESS,
BootstrapDialog.TYPE_WARNING,
BootstrapDialog.TYPE_DANGER];
$.each(types, function(index, type){
BootstrapDialog.show({
type: type,
title: 'Message type: ' + type,
message: 'What to do next?',
buttons: [{
label: 'I do nothing.'
}]
});
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
dialog的大小情況 設置一個相對的大小
size: BootstrapDialog.SIZE_LARGE,
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);
}
}]
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
自己定義dialog的形狀
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();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
自己定義dialog的大小形狀
Adding additional css classes to your dialog
This is useful for applying effects to specific dialogs.
For example if you would like to give your ‘login-dialog’ a smaller size, you can do this way:
<style>
.login-dialog .modal-dialog {
width: 300px;
}
</style>
1
2
3
4
5
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();
}
}]
});
1
2
3
4
5
6
7
8
9
10
11
12
13
處理dialog的事件的問題
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.');
}
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
特定的業務阻止去關閉對話框
Stop closing your dialog.
Option ‘onhide’ gives you an opportunity to stop closing the dialog according to some conditions, making your ‘onhide’ callback returns false to stop closing the dialog.
In the following example, the dialog closes only when your most favorite fruit is ‘banana’ (Case insensitive).
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();//對於對話框內部的實例對象的引用
}
}]
});
---------------------
作者：汪小哥
來源：CSDN
原文：https://blog.csdn.net/u012881904/article/details/52817451
版權聲明：本文爲博主原創文章，轉載請附上博文鏈接！