通过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