程序猿更友好的使用bootstrap弹出框

程序猿喜欢用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 -->

程序猿更喜欢的方式是这样：

 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/