一款轻量级的Bootstrap 3模态弹窗插件--bootstrap3-dialog

Web开发中，模态弹窗应该是避免不了的事情，提示消息，确认操作等都需要使用到弹窗。那么，如果你在项目开发中使用了bootstrap前端框架呢，弹窗这件事情又如何处理？是用bootstrap官方提供的，还是自己封装？这里给大家推荐一款已经成熟的Bootstrap 3轻量级模态弹窗插件--bootstrap3-dialog。当然，bootstrap3的弹窗插件还有其他的，有兴趣的话，大家可以自己搜索一下。 bootstrap3-dialog虽然轻量，但功能却十分完整。可以满足各种弹窗开发需求，包括： 1.常规提示

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

2.自定义参数配置的提示

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

3.修改弹窗标题

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

4.修改弹窗内容

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

5.动态加载内容

BootstrapDialog.show({
            message: $('<div></div>').load('remote.html')
        });

6.自定义按钮和操作

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

7.配置弹窗上按钮的热键

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

8.同时打开多个弹窗

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

9.自定义弹窗类型（提示，错误，警告）

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

10.自定义弹窗尺寸

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

11.支持拖拽

BootstrapDialog.show({
            title: 'Draggable Dialog',
            message: 'Try to drag on dialog title to move your dialog.',
            draggable: true
        });

12.数据绑定

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

    13.确认弹窗并支持回调

BootstrapDialog.confirm('Hi Apple, are you sure?', function(result){
            if(result) {
                alert('Yup.');
            }else {
                alert('Nope.');
            }
        });

关于bootstrap3-dialog弹窗插件的更多操作体验请参考原作者的文档：http://nakupanda.github.io/bootstrap3-dialog/