扩展bootstrap modal

1、使用bootstrap modal控件主要还是因为能自适应，是响应式的功能，此插件不用写一些多余的html代码，入modal-dialog、modal-content、modal-header、modal-body、modal-footer，只需要编写content的代码，使用此插件进行渲染。

1、页面加载完后，调用$("选择器").zl_dialog(option); 先进行初始化。

2、$("选择器").zl_dialog("open");

(function() {
    $.fn.zl_dialog = function(option, other) {
        // 如果是字符串，表示调用方法，否则是执行初始化操作
        if (typeof option == "string") {
            var method = $.fn.zl_dialog.methods[option];
            if (method) {
                return method(this, other)
            }
        }
        option = option || {};
        return this.each(function() {
            var data = $.data(this, "zl_dialog");
            if (data) {
                $.extend(data.options, option)
            } else {
                data = $.data(this, "zl_dialog", {
                    options: $.extend({}, $.fn.zl_dialog.defaults, option)
                })
            }
            transitionEnd(this);
        });
    };
    // 默认参数配置信息
    $.fn.zl_dialog.defaults = {
        backdrop: "static",
        keyboard: false,
        show: false,
        showClose: true,
        appfoothide: true,
        title: "",
        width: "", // lg, sm
        buttons: [],
        onBeforeClose: function() {
            return true;
        },
        onClose: function() {},
        onShow: function() {},
        onBeforeOpen: function() {
            return true;
        }
    };
    // 方法
    $.fn.zl_dialog.methods = {
        open: function(target) {
            var modalDialog = $.data(target[0], "zl_dialog");
            modalDialog.dialog.modal("show")
        },
        close: function(target) {
            var modalDialog = $.data(target[0], "zl_dialog");
            modalDialog.dialog.modal("hide")
        },
        showLoading: function(target, a) {
            var modalDialog = $.data(target[0], "zl_dialog");
            modalDialog.dialog.find(">div.modal-dialog").showLoading(a)
        },
        hideLoading: function(target) {
            var modalDialog = $.data(target[0], "zl_dialog");
            modalDialog.dialog.find(">div.modal-dialog").hideLoading()
        },
        resize: function(target) {
            resize(target[0])
        },
        getdhbar: function(target) {
            var modalDialog = $.data(target[0], "zl_dialog");
            return modalDialog.dialog_head_xs;
        },
        destory: function(target) {
            target.closest("div.modal-dialog").remove()
        }
    };
    // 渲染
    var transitionEnd = function(target) {
        var modalDialog = $.data(target, "zl_dialog");
        var option = $.data(target, "zl_dialog").options;
        $(target).addClass("mx-dialog-c");
        // 判断是否渲染过，如果渲染过就不执行了。
        if (!modalDialog["isdrawui"]) {
            var bs_modal_class = "";
            var modal_class = "";
            if (option.width == "lg") {
                bs_modal_class = "bs-example-modal-lg";
                modal_class = "modal-lg"
            } else if (option.width == "sm") {
                bs_modal_class = "bs-example-modal-sm";
                modal_class = "modal-sm"
            }
            modalDialog["dialog"] = $('<div class="modal fade ' + bs_modal_class + '" ><div class="modal-dialog modal-zl-dialog ' + modal_class + '"></div></div>');
            modalDialog["dialog_content"] = $('<div class="modal-content"></div>').appendTo(modalDialog.dialog.find(">div.modal-dialog"));
            modalDialog["dialog_head"] = $('<div class="modal-header"></div>').appendTo(modalDialog.dialog_content);
            modalDialog["dialog_head_xs"] = $('<div class="dh-bar modal-header-xs"></div>').appendTo(modalDialog.dialog_content);
            modalDialog["dialog_body"] = $('<div class="modal-body"></div>').appendTo(modalDialog.dialog_content);
            modalDialog.dialog_body.append($(target));
            modalDialog["dialog_footer"] = $('<div class="modal-footer"></div>').appendTo(modalDialog.dialog_content);
            if (option.appfoothide) {
                modalDialog.dialog_footer.addClass("appfoothide")
            }
            $(target).addClass("zl_dialog");
            $("body").append(modalDialog.dialog);
            modalDialog.dialog.modal({
                keyboard: option.keyboard,
                show: option.show,
                backdrop: option.backdrop
            });
            modalDialog.dialog.on("show.bs.modal",
                function() {
                    if (option.onBeforeOpen.call(target) == false) return false
                }).on("shown.bs.modal",
                function() {
                    $(target).addClass("open");
                    $(target).resize();
                    resize(target);
                    option.onShow.call(target)
                }).on("hide.bs.modal",
                function() {
                    if (option.onBeforeClose.call(target) == false) return false;
                    var data = $.data(target, "zl_dialog");
                    data.dialog.find(">div.modal-dialog").addClass("modal-zl-dialog")
                }).on("hidden.bs.modal",
                function() {
                    $(target).removeClass("open");
                    var a = $("body").find("div.modal.fade.in");
                    if (a.length > 0) {
                        $("body").addClass("modal-open")
                    }
                    option.onClose.call(target)
                }).on("loaded.bs.modal",
                function() {})
        }
        modalDialog["isdrawui"] = true;
        var n = '<button type="button" class="close" data-dismiss="modal" aria-hidden="true" >&times;</button>';
        if (!option.showClose) {
            n = ""
        }
        modalDialog.dialog_head.empty();
        modalDialog.dialog_head.html(n + " " + option.title);
        modalDialog.dialog_head_xs.empty();
        modalDialog.xs_return = $('<button type="button" class="btn  pull-left ">  <i class="ace-icon fa fa-angle-left  bigger-120"></i>关闭</button> ').appendTo(modalDialog.dialog_head_xs);
        if (!option.showClose) {
            modalDialog.xs_return.remove()
        }
        $(option.title).appendTo(modalDialog.dialog_head_xs);
        modalDialog.xs_more = $('<div class="btn-group pull-right"><button type="button" class="btn  no-border dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="ace-icon fa fa-reorder "></i></button><ul class="dropdown-menu dropdown-light"></ul></div>').appendTo(modalDialog.dialog_head_xs);
        if (modalDialog.xs_return && modalDialog.xs_return.length > 0) {
            modalDialog.xs_return.on("click",
                function(e) {
                    modalDialog.dialog.modal("hide")
                })
        }
        modalDialog.dialog_footer.empty();
        if (option.buttons && option.buttons.length > 0) {
            modalDialog.dialog_footer.show();
            $.each(option.buttons, function(i, button) {
                    var buttonDomain = $(button.dom).appendTo(modalDialog.dialog_footer);
                    buttonDomain.on("click",
                        function() {
                            return button.handler.call(this)
                        });
                    var ul = modalDialog.xs_more.find("ul");
                    if (!buttonDomain.is("button,div.btn-group")) {
                        return true
                    }
                    if (buttonDomain.hasClass("mx-xs-quick")) {
                        var html = buttonDomain.html();
                        var n = $('<button type="button" class="btn  pull-right" > ' + html + "</button> ").appendTo(modalDialog.dialog_head_xs);
                        $.data(n[0], "linkbtn", buttonDomain);
                        $.data(buttonDomain[0], "linkbtn", n);
                        n.on("click", function(e) {
                                var a = $.data(this, "linkbtn");
                                a.trigger("click")
                            });
                        return true
                    }
                    if (buttonDomain.hasClass("btn-group")) {
                        var d = buttonDomain.find(">button").html();
                        $('<li class="divider"></li>').appendTo(ul);
                        var l = buttonDomain.find(">ul");
                        l.find(">li").each(function(e, a) {
                            $liO = $(a);
                            if ($liO.hasClass("divider")) {
                                $('<li class="divider"></li>').appendTo(ul);
                                return true
                            }
                            var i = $("<li>" + $liO.html() + "</li>").appendTo(ul);
                            if ($liO.hasClass("disabled") || $liO.hasClass("hidden")) {
                                i.addClass("hidden")
                            }
                            $.data(i[0], "linkbtn", $liO);
                            $.data($liO[0], "linkbtn", i);
                            i.on("click",
                                function(e) {
                                    var a = $.data(this, "linkbtn");
                                    a.trigger("click")
                                })
                        })
                    } else {
                        var d = buttonDomain.html();
                        var s = $('<li><a href="#" >' + d + "</a></li>").appendTo(ul);
                        if (buttonDomain.hasClass("disabled") || buttonDomain.hasClass("hidden")) {
                            s.addClass("hidden")
                        }
                        $.data(s[0], "linkbtn", buttonDomain);
                        $.data(buttonDomain[0], "linkbtn", s);
                        s.on("click",
                            function(e) {
                                var a = $.data(this, "linkbtn");
                                a.trigger("click")
                            })
                    }
                });
            if (modalDialog.xs_more.find(">ul>li").length <= 0) {
                modalDialog.xs_more.addClass("hidden")
            } else {
                modalDialog.xs_more.removeClass("hidden")
            }
        } else {
            modalDialog.dialog_footer.hide()
        }
        modalDialog.dialog.find('a[data-toggle="tab"]').on("shown.bs.tab",
            function(i) {
                resize(target)
            });
    };
    var resize = function(target) {
        var data = $.data(target, "zl_dialog");
        var i = $.data(target, "zl_dialog").options;
        data.dialog.find(">div.modal-dialog").removeClass("modal-zl-dialog");
        var wh = $(window).height();
            data.dialog.removeClass("mx-xs")
        if (data.dialog_head.outerHeight() + data.dialog_body.outerHeight() + data.dialog_footer.outerHeight() > wh) {
            data.dialog.find(".modal-dialog").addClass("max")
        } else {}
            data.dialog_body.css({
            "max-height": wh - data.dialog_head.outerHeight() - data.dialog_footer.outerHeight() - 5
        })
    }
})(jQuery);