Bootstrap之BootstrapDialog

Make use of Bootstrap's modal more monkey-friendly.

---

參考地址：http://nakupanda.github.io/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 -->

Dialog彈出層：

        BootstrapDialog.alert('I want banana!');

 

 

Examples

---

Simplest

 

只提供信息顯示，並保持全部其餘事情默認。

        BootstrapDialog.show({ message: 'Hi Apple!' });

Dialog Title

        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)

        BootstrapDialog.show({ message: $('<div></div>').load('remote.html') });

加載遠程頁面 (2)

 BootstrapDialog.show({ message: function(dialog) { var $message = $('<div></div>'); var pageToLoad = dialog.getData('pageToLoad'); $message.load(pageToLoad); return $message; }, data: { 'pageToLoad': 'remote.html' } });

 

Buttons

        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(); } }] });

 

操做Buttons

經過bootstrapdialog建立按鈕有一些額外的功能：
$button.toggleEnable(true|false);
$button.enable(); // 至關於 $button.toggleEnable(true);
$button.disable(); // 至關於  $button.toggleEnable(false);
$button.toggleSpin(true|false);
$button.spin(); // 至關於 $button.toggleSpin(true);
$button.stopSpin(); // 至關於  $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.'); } }] });

 

 

建立 dialog 實例

BootstrapDialog.show(...) 只是一個快捷方式，若是你須要對話框實例，用「新」。

        
        // 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!' });

Button with identifier

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

 

較大的對話框

默認狀況下，對話框的大小是 'size-normal' 或 BootstrapDialog.SIZE_NORMAL, 但你能夠經過設置選項的 'size' 的'size-large' 或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(); } }] });

 

More dialog sizes

Please note that specifying BootstrapDialog.SIZE_WIDE is equal to using css class 'modal-lg' on Bootstrap Modal.

        
        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(); } }] });

 

Dialog closable / unclosable

If option 'closable' is set to false, the default closing behaviors will be disabled, but you can still close the dialog by using 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' and '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(); } }] });

Confirm

　　BootstrapDialog.confirm('Hi Apple, are you sure?');

Confirm with callback

        BootstrapDialog.confirm('Hi Apple, are you sure?', function(result){ if(result) { alert('Yup.'); }else { alert('Nope.'); } });

 

 

Available options

---

Please note that all options described below are optional, but you will have a weird dialog if you don't even give it a message to display.
Most options can be set via init options or property setters.

Option	Possible values	Description
type	BootstrapDialog.TYPE_DEFAULT or 'type-default' BootstrapDialog.TYPE_INFO or 'type-info' BootstrapDialog.TYPE_PRIMARY or 'type-primary' (default) BootstrapDialog.TYPE_SUCCESS or 'type-success' BootstrapDialog.TYPE_WARNING or 'type-warning' BootstrapDialog.TYPE_DANGER or 'type-danger'	Give your dialog a specific look, color scheme can be seen on Bootstrap's Button.
size	BootstrapDialog.SIZE_NORMAL or 'size-normal' (default) BootstrapDialog.SIZE_WIDE or 'size-wide' BootstrapDialog.SIZE_LARGE or 'size-large'	-
cssClass	-	Additional css classes that will be added to your dialog.
title	String or Object(html)	-
message	String or Object(html)	-
buttons	array	Examples: BootstrapDialog.show({ title: 'Say-hello dialog', message: 'Hello world!', buttons: [{ id: 'btn-ok', icon: 'glyphicon glyphicon-check', label: 'OK', cssClass: 'btn-primary', autospin: false, action: function(dialogRef){ dialogRef.close(); } }] });

id: optional, if id is set, you can use dialogInstance.getButton(id) to get the button later. icon: optional, if set, the specified icon will be added to the button. cssClass: optional, additional css class to be added to the button. autospin: optinal, if it's true, after clicked the button a spinning icon appears. action: optional, if provided, the callback will be invoked after the button is clicked, and the dialog instance will be passed to the callback function.
closable	true | false	When set to true, you can close the dialog by: Clicking the close icon in dialog header. Clicking outside the dialog. ESC key.
spinicon	Icon class name, for example 'glyphicon glyphicon-check'. Default value is 'glyphicon glyphicon-asterisk'.	Specify what icon to be used as the spinning icon when button's 'autospin' is set to true.
data	Key-value object. For example {'id' : '100'}	Data to be bound to the dialog.
onshow	function	If provided, it will be invoked when the dialog is popping up.
onshown	function	If provided, it will be invoked when the dialog is popped up.
onhide	function	If provided, it will be invoked when the dialog is popping down.
onhidden	function	If provided, it will be invoked when the dialog is popped down.
autodestroy	true (default) | false	When it's true, all modal stuff will be removed from the DOM tree after the dialog is popped down, set it to false if you need your dialog (same instance) pups up and down again and again.
description	String	If provided, 'aria-describedby' attribute will be added to the dialog with the description string as its value. This can improve accessibility, as the description can be read by screen readers.
nl2br	true | false	Automatically convert line breaking character to <br /> if it's set to true, everything keeps original if it's false.

Available methods

---

Method	Description
open()	Open the dialog. Usage: dialogInstance.open()
close()	Close the dialog. Usage: dialogInstance.close()
getModal()	Return the raw modal, equivalent to $('<div class='modal fade'...></div>')
getModalDialog()	Return the raw modal dialog.
getModalContent()	Return the raw modal content.
getModalHeader()	Return the raw modal header.
getModalBody()	Return the raw modal body.
getModalFooter()	Return the raw modal footer.
getData(key)	Get data entry according to the given key, returns null if no data entry found.
setData(key, value)	Bind data entry to dialog instance, value can be any types that javascript supports.
enableButtons(boolean)	Disable all buttons in dialog footer when it's false, enable all when it's true.
setClosable(boolean)	When set to true (default), dialog can be closed by clicking close icon in dialog header, or by clicking outside the dialog, or, ESC key is pressed.
realize()	Calling dialog.open() will automatically get this method called first, but if you want to do something on your dialog before it's shown, you can manually call dialog.realize() before calling dialog.open().

---

Go to the project. | Contact me if you can help to improve this example page.