`

基于Bootstrap V3的Modal 进行 Dialog 二次封装 原创文章

 
阅读更多
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);

  • 大小: 43 KB
分享到：
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    bs.beamDialog:基于Bootstrap V3的Modal 进行 Dialog 二次封装

    beamDialog 是基于bootstrap V3版本中的modal进行二次封装的结果.主要用于方便的调用modal框体. 个人主页: 参数设置: $.beamDialog(options); var defaults = { title:'标题', content:'内容', showCloseButton:...

    bootstrap3-dialog 基于bootstrap3的弹出层组件

    * 本js只是在bootstrap3-dialog的基础上进行的2次封装， * bootstrap3-dialog已经是非常好用了，调用也非常简单。 * 详情请访问：https://github.com/nakupanda/bootstrap3-dialog， * 这是原项目地址，可以自行...

    bootstrap-modal.zip

    bootstrap-modal 扩展了 Bootstrap 内置的 modal 以提供附加功能，引入了 ModalManager 类可处理多个 modal 并侦听它们的事件。 一个简单的 ModalManager 的创建方式： $('body').modalmanager('loading'); ...

    bootstrap-modal

    Bootstrap Modal是基于jQuery的一款强大的模态对话框插件，它被广泛应用于Web开发中，以提供弹出式窗口的功能，通常用于显示警告、确认信息、展示详细内容或进行表单输入等场景。这个插件是Bootstrap框架的一个核心...

    PyPI 官网下载 | django-bootstrap-modal-forms-1.4.0.tar.gz

    对于`django-bootstrap-modal-forms-1.4.0.tar.gz`，首先需要解压，然后使用pip进行安装，命令可能包括`pip install .`或者`python setup.py install`。安装完成后，根据文档指示，在Django项目的settings.py中添加...

    Tmsgbox 基于bootstrap的消息提示框组件封装 模态框组件封装

    Tmsgbox不仅提供了基础的提示功能，还允许开发者进行深度定制，例如添加自定义样式、扩展新的功能模块，甚至通过插件机制进行二次开发。通过阅读Tmsgbox的文档和源码，开发者可以更深入地理解和利用这个组件，打造...

    bootstrap3-dialog

    var dialog = BootstrapDialog.show({ title: '对话框标题', message: '这是对话框的内容', buttons: [{ label: '确定', cssClass: 'btn-primary', action: function(dialogItself) { // 确定按钮点击后的...

    bootstrap的dialog.js

    Bootstrap的Dialog.js是一个基于Bootstrap框架的对话框插件，它扩展了Bootstrap的模态（Modal）组件，提供了更丰富的交互性和自定义功能。在网页应用中，对话框常常用于显示警告、确认信息或者进行表单操作，...

    react-bootstrap-modal, jschr Bootstrap 模式更好的反应端口.zip

    react-bootstrap-modal, jschr Bootstrap 模式更好的反应端口 响应 Bootstrap 模式部分是 Bootstrap Modal的jschr 。 Reimplements模式下的Twitter Bootstrap 模式组件。 基于反应引导团队的原始工作。注意：如果你...

    基于bootstrap的管理系统

    基于bootstrap的后台管理系统基于bootstrap的后台管理系统基于bootstrap的后台管理系统基于bootstrap的后台管理系统基于bootstrap的后台管理系统基于bootstrap的后台管理系统基于bootstrap的后台管理系统基于...

    Bootstrap应用实践:Bootstrap Modal

    移动WEB应用实践：Bootstrap应用实践之Bootstrap Modal文章的示例代码 文章地址：http://blog.csdn.net/rowisdom/article/details/17004701

    Bootstrap v3 中文文档

    Bootstrap v3 中文文档 深入了解Bootstrap底层结构的关键部分，包括我们让web开发变得更好、 更快、 更强壮的最佳实践。我们对框架中的某些关键部分增加了对移动设备友好的样式。 而在Bootstrap 3中，我们重写了整个...

    bootstrap V3 中文文档

    bootstrap V3 中文文档，和中文官网的一致，方便本地阅读

    modal_dialog_base

    "modal_dialog_base" 是一个可能与前端开发相关的压缩包文件，尤其在UI设计和交互体验中常见。在网页或应用程序中，模态对话框（Modal Dialog）是一种重要的用户界面元素，用于显示临时信息或者需要用户确认或输入...

    基于Bootstrap与jQuery-validate的个人封装检验框架实例

    基于Bootstrap与jQuery-validate的个人封装检验框架demo,拥有良好的UI与用户体验.博客地址：http://blog.csdn.net/u010506919/article/details/75137353

    bootstrap v3视频教程和离线手册

    这个压缩包包含的是Bootstrap v3版本的相关资源，对于学习和参考Bootstrap的设计与开发非常有用。 首先，`bootstrap中文手册.chm` 是一个离线版的手册，以CHM（Compiled HTML Help）格式提供，方便在没有网络的情况...

    基于bootstrap样式和backbone的常用UI封装

    这可能包括`&lt;div class="modal"&gt;`，`&lt;div class="modal-dialog"&gt;`和`&lt;div class="modal-content"&gt;`等元素。 3. **Bootstrap样式**：在模板中应用Bootstrap的CSS类，以确保模态框具有正确的外观和行为，如`.modal-...

    基于bootstrap3的Metronic模板

    基于bootstrap3的Metronic模板，新版本，比较全面！ 和资源库中10分的资源一样，我还加入了基于2.3的版本。 解压分成基于bootstrap3版本和基于bootstrap2.3的2个版本。

Magicbox
Global site tag (gtag.js) - Google Analytics