Bootstrap弹出框 模态框插件库

bootstrap的模态框效果挺不错，但是写起来挺麻烦，只想弹出来一段话，却要写一堆html代码，比较繁琐，找了一下，网上有封装好的js库，直接生成模态框html，不需要手写。

一、源文件

Ewin.js

(function ($) {

    window.Ewin = function () {
        var html = '
' +
            '
' +
            '
' +
            '
' +
            '×Close' +
            '
[Title]
' +
            '
' +
            '
' +
            '
[Message]
' +
            '
' +
            '
' +
            '[BtnCancel]' +
            '[BtnOk]' +
            '
' +
            '
' +
            '
' +
            '
';


        var dialogdHtml = '
' +
            '
' +
            '
' +
            '
' +
            '×Close' +
            '
[Title]
' +
            '
' +
            '
' +
            '
' +
            '
' +
            '
' +
            '
';
        var reg = new RegExp("\\[([^\\[\\]]*?)\\]", 'igm');
        var generateId = function () {
            var date = new Date();
            return 'mdl' + date.valueOf();
        }
        var init = function (options) {
            options = $.extend({}, {
                title: "操作提示",
                message: "提示内容",
                btnok: "确定",
                btncl: "取消",
                width: 200,
                auto: false
            }, options || {});
            var modalId = generateId();
            var content = html.replace(reg, function (node, key) {
                return {
                    Id: modalId,
                    Title: options.title,
                    Message: options.message,
                    BtnOk: options.btnok,
                    BtnCancel: options.btncl
                }[key];
            });
            $('body').append(content);
            $('#' + modalId).modal({
                width: options.width,
                backdrop: 'static'
            });
            $('#' + modalId).on('hide.bs.modal', function (e) {
                $('body').find('#' + modalId).remove();
            });
            return modalId;
        }

        return {
            alert: function (options) {
                if (typeof options == 'string') {
                    options = {
                        message: options
                    };
                }
                var id = init(options);
                var modal = $('#' + id);
                modal.find('.ok').removeClass('btn-success').addClass('btn-primary');
                modal.find('.cancel').hide();

                return {
                    id: id,
                    on: function (callback) {
                        if (callback && callback instanceof Function) {
                            modal.find('.ok').click(function () { callback(true); });
                        }
                    },
                    hide: function (callback) {
                        if (callback && callback instanceof Function) {
                            modal.on('hide.bs.modal', function (e) {
                                callback(e);
                            });
                        }
                    }
                };
            },
            confirm: function (options) {
                var id = init(options);
                var modal = $('#' + id);
                // modal.find('.ok').removeClass('btn-primary').addClass('btn-success');
                modal.find('.cancel').show();
                return {
                    id: id,
                    on: function (callback) {
                        if (callback && callback instanceof Function) {
                            modal.find('.ok').click(function () { callback(true); });
                            modal.find('.cancel').click(function () { callback(false); });
                        }
                    },
                    hide: function (callback) {
                        if (callback && callback instanceof Function) {
                            modal.on('hide.bs.modal', function (e) {
                                callback(e);
                            });
                        }
                    }
                };
            },
            dialog: function (options) {
                options = $.extend({}, {
                    title: 'title',
                    url: '',
                    width: 800,
                    height: 550,
                    onReady: function () { },
                    onShown: function (e) { }
                }, options || {});
                var modalId = generateId();

                var content = dialogdHtml.replace(reg, function (node, key) {
                    return {
                        Id: modalId,
                        Title: options.title
                    }[key];
                });
                $('body').append(content);
                var target = $('#' + modalId);
                target.find('.modal-body').load(options.url);
                if (options.onReady())
                    options.onReady.call(target);
                target.modal();
                target.on('shown.bs.modal', function (e) {
                    if (options.onReady(e))
                        options.onReady.call(target, e);
                });
                target.on('hide.bs.modal', function (e) {
                    $('body').find(target).remove();
                });
            }
        }
    }();
})(jQuery);

二、调用方法

首先引入js文件

1.仅包含确定按钮的提示框

 Ewin.alert({message: "提示语句"});

如果需要在弹出框点击确定后再执行一些方法：

Ewin.alert({message: "提示语句"]}).on(function (e) {
   if (e) {
      //TODO
   }
});

2.包含确定取消的提示框

Ewin.confirm({ message: "确认要删除选择的数据吗？" }).on(function (e) {
    if (!e) {
        //点击取消按钮
    }else{
        //点击确定按钮
    }
});

引用自：https://www.cnblogs.com/cpcpc/p/7233898.html