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

程序猿喜歡用bootstrap的model彈出框，但是這里會遇到一些麻煩，他們需要寫這么一段代碼：

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

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

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

 

舉例

最簡單的：

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

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

 

彈出框標題：

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）：

這里有一些把遠程頁面作為消息加載的方法，下面是其中的一種。檢出 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.');  
                }  
            }]  
        });

 

打開多個對話框

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

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

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

 

有標識符的按鈕

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

 

控制你的彈出框

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