1             <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();

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

  1 /*------------------------------------------------------  2      *封装的dialog插件，基于bootstrap模态窗口的简单扩展  3      *作者：muzilei  4      *修改人：lyw 原插件对bootstrap3.3.0不支持  5      *email:530624206@qq.com  6 -------------------------------------------------------*/  7 /*----------------------------------------------------------------------------------------------------  8 1、bootstrap-wwDialog 插件暂时只有2个按钮，取消和确定，暂不支持自定义按钮，自己可以修改源代码添加此功能。  9  10 2、只能使用html data-*方式定义，不支持js初始化时配置参数，自己可以修改源码扩展此功能。 11  12 3、宽度和高度建议不要使用百分比 13  14 4、注意这里回调函数必需是字符串格式，如okEvent:”ok()” 这里ok函数式自己定义的函数，切记要带(); 15 ------------------------------------------------------------------------------------------------------*/ 16 (function ($) { 17     $.fn.wwDialog = function () { 18         var defaults = { 19             id: "modal",//弹窗id 20             title: "dialog",//弹窗标题 21             width: "600",//弹窗宽度，暂时不支持% 22             height: "500",//弹窗高度,不支持% 23             backdrop: false,//是否显示遮障，和原生bootstrap 模态框一样 24             keyboard: true,//是否开启esc键退出，和原生bootstrap 模态框一样 25             remote: "",//加载远程url，和原生bootstrap 模态框一样 26             openEvent: null,//弹窗打开后回调函数 27             closeEvent: null,//弹窗关闭后回调函数 28             okEvent: null//单击确定按钮回调函数 29         }; 30  31         //动态创建窗口 32         var creatDialog = { 33             init: function (opts) { 34                 var _self = this; 35  36                 //动态插入窗口 37                 var d = _self.dHtml(opts); 38                 $("body").append(d); 39  40                 var modal = $("#" + opts.id); 41  42                 //初始化窗口 43                 //modal.modal(opts);                 44                 modal.modal({ 45                     backdrop: false, 46                     keyboard: opts.keyboard 47                 }); 48                 $(".modal-body").load(opts.remote); 49  50                 //窗口大小位置 51                 var h = modal.height() - modal.find(".modal-header").outerHeight() - modal.find(".modal-footer").outerHeight() - 5; 52                 //modal.css({ ‘margin-left‘: opts.width / 2 * -1, ‘margin-top‘: opts.height / 2 * -1, ‘top‘: ‘50%‘ }).find(".modal-body").innerHeight(h); 53                 modal.css({ 54                     position: "absolute", 55                     left: ($(window).width() - opts.width) / 2, 56                     top: ($(document).height() - opts.height) / 2 57                 }); 58                 $(".modal-body").css({ 59                     height: opts.height - 115 60                 }); 61                 modal 62                 //显示窗口 63                 .modal(‘show‘) 64                 //隐藏窗口后删除窗口html 65                 .on(‘hidden‘, function () { 66                     modal.remove(); 67                     $(".modal-backdrop").remove(); 68                     if (opts.closeEvent) { 69                         eval(opts.closeEvent); 70                     } 71                 }) 72                 //窗口显示后 73                 .on(‘shown‘, function () { 74  75                     if (opts.openEvent) { 76                         eval(opts.openEvent); 77                     } 78  79  80                 }); 81                 //绑定按钮事件 82                 $(".ok").click(function () { 83                     if (opts.okEvent) { 84                         var ret = eval(opts.okEvent); 85                         if (ret) { 86                             modal.modal(‘hide‘); 87                         } 88                     } 89                 }); 90             }, 91             dHtml: function (o) { 92                 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>‘; 93             } 94         }; 95  96         return this.each(function () { 97             $(this).click(function () { 98                 var opts = $.extend({}, defaults, { 99                     id: $(this).attr("data-id"),100                     title: $(this).attr("data-mtitle"),101                     width: $(this).attr("data-width"),102                     height: $(this).attr("data-height"),103                     backdrop: $(this).attr("data-backdrop"),104                     keyboard: $(this).attr("data-keyboard"),105                     remote: $(this).attr("data-remote"),106                     openEvent: $(this).attr("data-openEvent"),107                     closeEvent: $(this).attr("data-closeEvent"),108                     okEvent: $(this).attr("data-okEvent")109                 });110                 $(".modal").remove();111                 creatDialog.init(opts);112             });113         });114 115     };116 117 })(jQuery);