經過js自定義Bootstrap彈出框內容BootstrapDialog

時間 2020-06-22

標籤經過自定義 bootstrap 彈出框內 bootstrapdialog 欄目 JavaScript 简体版

原文原文鏈接

程序猿喜歡用bootstrap的model彈出框，可是這裏會遇到一些麻煩，他們須要寫這麼一段代碼：css

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

程序猿更喜歡的方式是這樣：（直接加js，不須要再寫像上面的html）jquery

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

舉例

最簡單的：

僅提供消息的展現，其餘屬性都保持默認。

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

彈出框標題：git

BootstrapDialog.show({ title: 'Say-hello dialog', message: 'Hi Apple!' });

控制標題的變化：github

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

控制信息的變化：ajax

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

打開多個對話框

一個好看的堆疊對話框。請注意第2、第三個對話框是可拖拽的。

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(...)也會返回一個新建的彈出框實例。bootstrap

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

有標識符的按鈕app

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; }

控制你的彈出框ide

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';

具體屬性及方法請查看原始官網： http://nakupanda.github.io/bootstrap3-dialog/

若有異議：請查看原始官網： http://nakupanda.github.io/bootstrap3-dialog/

轉自： http://blog.csdn.net/shenya2/article/details/53066577