对bootstrap modal的简单扩展封装

对bootstrap modal的简单扩展封装

参考自：http://www.muzilei.com/archives/677   注：原文不支持bootstrap新版本，并且居中等存在问题

　　此段时间一直在学习bootstrap,主要是用于做后台，一直习惯用easyui，ui，jgrid前端框架，以至于并不习惯bootstrap的风格。近来考虑到easyui性能不太好，就用了bootstrap,先说下我所了解的bootstrap. 1.外国的框架用于显示中文看着总是不妥. 2.默认的样式觉得有些松散；比如表格，必须加上table-condensed类才显得紧凑一些。

　　进入正题，在使用bootstrap 模态对话框时需要在页面写对话框html，如果一个页面有许多地方需要对话框，那意味着需要写多个，感觉很麻烦，平时不太习惯bootstrap 模态对话框这种方式，所以做了个简单封装及扩展，增加了自定义标题，宽度和高度，并根据宽高居中显示

 

　　调用代码

            <a class="mzDialog" href="#" data-remote="/AccountingPeriod/Init" data-mtitle="哈哈" data-id="m1" data-width="600" data-height="500" data-backdrop=false data-okevent="ok()" data-openevent="open()">弹窗demo</a>

　

        $(".mzDialog").wwDialog();

　　目前只支持以data-属性调用，不支持以js方式调用，欢迎大家扩展一下哦

　　参数介绍

id:"modal",//弹窗id
title:"dialog",//弹窗标题
width:"600",//弹窗宽度，暂时不支持%
height:"500",//弹窗高度,不支持%
backdrop:true,//是否显示遮障，和原生bootstrap 模态框一样
keyboard:true,//是否开启esc键退出，和原生bootstrap 模态框一样
remote:"",//加载远程url，和原生bootstrap 模态框一样
openEvent:null,//弹窗打开后回调函数
closeEvent:null,//弹窗关闭后回调函数
okEvent:null//单击确定按钮回调函数

 

　　下面是源代码：

/*------------------------------------------------------
     *封装的dialog插件，基于bootstrap模态窗口的简单扩展
     *作者：muzilei
     *修改人：lyw 原插件对bootstrap3.3.0不支持
     *email:530624206@qq.com
-------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------
1、bootstrap-wwDialog 插件暂时只有2个按钮，取消和确定，暂不支持自定义按钮，自己可以修改源代码添加此功能。

2、只能使用html data-*方式定义，不支持js初始化时配置参数，自己可以修改源码扩展此功能。

3、宽度和高度建议不要使用百分比

4、注意这里回调函数必需是字符串格式，如okEvent:”ok()” 这里ok函数式自己定义的函数，切记要带();
------------------------------------------------------------------------------------------------------*/
(function ($) {
    $.fn.wwDialog = function () {
        var defaults = {
            id: "modal",//弹窗id
            title: "dialog",//弹窗标题
            width: "600",//弹窗宽度，暂时不支持%
            height: "500",//弹窗高度,不支持%
            backdrop: false,//是否显示遮障，和原生bootstrap 模态框一样
            keyboard: true,//是否开启esc键退出，和原生bootstrap 模态框一样
            remote: "",//加载远程url，和原生bootstrap 模态框一样
            openEvent: null,//弹窗打开后回调函数
            closeEvent: null,//弹窗关闭后回调函数
            okEvent: null//单击确定按钮回调函数
        };

        //动态创建窗口
        var creatDialog = {
            init: function (opts) {
                var _self = this;

                //动态插入窗口
                var d = _self.dHtml(opts);
                $("body").append(d);

                var modal = $("#" + opts.id);

                //初始化窗口
                //modal.modal(opts);                
                modal.modal({
                    backdrop: false,
                    keyboard: opts.keyboard
                });
                $(".modal-body").load(opts.remote);

                //窗口大小位置
                var h = modal.height() - modal.find(".modal-header").outerHeight() - modal.find(".modal-footer").outerHeight() - 5;
                //modal.css({ 'margin-left': opts.width / 2 * -1, 'margin-top': opts.height / 2 * -1, 'top': '50%' }).find(".modal-body").innerHeight(h);
                modal.css({
                    position: "absolute",
                    left: ($(window).width() - opts.width) / 2,
                    top: ($(document).height() - opts.height) / 2
                });
                $(".modal-body").css({
                    height: opts.height - 115
                });
                modal
                //显示窗口
                .modal('show')
                //隐藏窗口后删除窗口html
                .on('hidden', function () {
                    modal.remove();
                    $(".modal-backdrop").remove();
                    if (opts.closeEvent) {
                        eval(opts.closeEvent);
                    }
                })
                //窗口显示后
                .on('shown', function () {

                    if (opts.openEvent) {
                        eval(opts.openEvent);
                    }


                });
                //绑定按钮事件
                $(".ok").click(function () {
                    if (opts.okEvent) {
                        var ret = eval(opts.okEvent);
                        if (ret) {
                            modal.modal('hide');
                        }
                    }
                });
            },
            dHtml: function (o) {
                return '<div id="' + o.id + '" class="modal fade" role="dialog" tabindex="-1" aria-labelledby="myModalLabel" aria-hidden="true" ><div style=" background-color: #000;bottom: 0;left: 0;position: fixed;right: 0;top: 0;transition: opacity 0.15s linear 0s;opacity: 0.5;"></div><div class="modal-dialog" style="display:table-cell"><div class="modal-content" style="width:' + o.width + 'px;height:' + o.height + 'px;"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" ><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button><h4 id="myModalLabel" class="modal-title">' + o.title + '</h4></div><div class="modal-body" ><p>正在加载...</p></div><div class="modal-footer"><button class="btn" data-dismiss="modal" aria-hidden="true">取消</button><button class="btn btn-primary ok">确定</button></div></div></div></div>';
            }
        };

        return this.each(function () {
            $(this).click(function () {
                var opts = $.extend({}, defaults, {
                    id: $(this).attr("data-id"),
                    title: $(this).attr("data-mtitle"),
                    width: $(this).attr("data-width"),
                    height: $(this).attr("data-height"),
                    backdrop: $(this).attr("data-backdrop"),
                    keyboard: $(this).attr("data-keyboard"),
                    remote: $(this).attr("data-remote"),
                    openEvent: $(this).attr("data-openEvent"),
                    closeEvent: $(this).attr("data-closeEvent"),
                    okEvent: $(this).attr("data-okEvent")
                });
                $(".modal").remove();
                creatDialog.init(opts);
            });
        });

    };

})(jQuery);