模態彈框：

<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.

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

Available methods