Bootstrap--BootstrapDialog

这里有两种展现方式
写在前面：首先你要引入的库有
css : bootstrap.min.css bootstrap-dialog.css
js : jquery-1.11.1.min.js bootstrap.min.js bootstrap-dialog.js

1、通过html代码显示

<!-- Button trigger modal  弹出框的触发器 -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
    Launch demo modal
</button>

<!-- Modal  弹出框的结构 -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">Modal title</h4>
            </div>
            <div class="modal-body">
                ...
            </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>
    </div>
</div>

这种方式简单直观； 但会增加html的‘重量’，而且不够灵活，大量使用时不建议使用

2、通过js的方式展现（需要注意的地方我都写在注释里了）
（1）最简单的实现方式：

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

还有一种更简单的实现方式：BootstrapDialog.alert('I want banana!'); //异步加载 适合用在方法的最后
（2）buttons

BootstrapDialog.show({
    message : "message",
    buttons : [{
        label : "btn1",
        cssClass : "btn-primary"     //给按钮添加类名   可以通过此方式给按钮添加样式
        },{
            label : "btn2",
            icon : "glyphicon glyphicon-ban-circle"     //通过bootstrap的样式添加图标按钮
        },{
            label : "btn3",
            action : function(dialog){      //给当前按钮添加点击事件
                dialog.close();
            }
        }
    ]
});

（3）操作title、message 可以通过 setTitle 和 setMessage 操作title和message

BootstrapDialog.show({
    title : "this is a title!",       //title
    message : "Document Comtent",
    buttons : [{
        label : "cancel",
        action : function(dialog){
            dialog.setTitle("title2");     //操作title
            dialog.setMessage("message1");     //操作message
            dialog.close();
        }
    },{
        label : "Ok",
        action : function(dialog){
            dialog.close();
        }
    }]
})

（4）按钮热键 （本人认为不常用）

BootstrapDialog.show({
    title: 'Button Hotkey',
    message: 'Try to press some keys...',
    onshow: function(dialog) {
        dialog.getButton('button-c').disable();     //通过getButton('id')获得按钮
    },
    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.');
        }
    }]
})

（5）动态加载message

BootstrapDialog.show({
    //message : $("<div></div>").load('content.html')     //第一种方式
    message : function(content){        //第二种方式
        var $message = $("<div></div>");
        var loadData = content.getData("contentFile");
        $message.load(loadData);
        return $message;      //一定记得返回值！
    },
    data : {"contentFile" :"content.html"}
});

（6）控制弹出框右上角的关闭按钮

BootstrapDialog.show({
    message: 'Hi Apple!',
    closable: true,       //控制弹出框拉右上角是否显示 ‘x’    默认为true
    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();     //总是能关闭弹出框
        }
    }]
});

（7） 弹出框的尺寸

BootstrapDialog.show({
    title: 'More dialog sizes',
    message: 'Hi Apple!',
    size : BootstrapDialog.SIZE_NORMAL   //默认尺寸
    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);
        }
    }]
});