zDialog插件网址：/jquery-info2426
再次封装zDialog的代码：
(function ($) {$.extend({iDialog: function (param) {var diag = new Dialog();if (!param.height && !param.width) {diag.Width = $(top.window).width();diag.Height = $(top.window).height();}else {diag.Width = param.width;diag.Height = param.height;}diag.Title = param.title;diag.Drag = false;diag.ShowButtonRow = false; //ShowButtonRow：是否不显示按钮栏，值为布尔型(true|false)，默认值为false，当定义了OKEvent或调用了addButton时自动设为true。diag.URL = param.url;diag.OkEvent = param.OkEvent; //这里是OkEvent而不是OKEvent，是为了隐藏弹出框自带按钮栏 diag.show();}});})(jQuery);
View Code
弹出最大化窗口(因插件本身的原因，最大化窗口比实际window大小略小一点)：
//弹出最大化窗口$.iDialog({title: "修改",url: "/Auth/UserManage/Edit?id=" + row.Id,OkEvent: function () {reloadgrid(); //调用方法刷当前页面，即弹出框的父页面 }});
View Code
弹出一般窗口：
$.iDialog({title: "添加",url: "/Auth/UserManage/Add",width: 500,height: 300,OkEvent: function () {save();}});
View Code
当窗口中的页面保存成功，需要刷新父窗口，这样调用：
parentDialog.OkEvent();parentDialog.close();
View Code
当窗口中的页面保存成功时，传值给父页面，这样调用：
父页面：
$.iDialog({title: "添加",url: "/Auth/UserManage/Add",width: 500,height: 300,OkEvent: function (userName) {$("#UserName").val(userName)}});
View Code
子页面：
//保存function save() {parentDialog.OkEvent($("#UserName").val());parentDialog.close();}
View Code
子窗体如何关闭当前窗体，再关闭父窗体，并刷新父窗体的父页面 ：
子窗体中数据保存完成后，这样调用：
parentDialog.OkEvent(parentDialog);
View Code
子窗体的父窗体中这样调用：
$.iDialog({title: "添加",url: "/Auth/UserManage/Add",width: 800,height: 400,OkEvent: function (childDialog) {parentDialog.OkEvent(); //刷新父窗体的父页面childDialog.close(); //先关子窗体parentDialog.close(); //再关父窗体 }});
View Code
封装后，该插件的特点：多层弹出，且弹出到框架的最顶层；使用方便，代码简捷；可以方便地刷新父页面，可以方便地向父页面传值。
示意图：
为什么要封装这个插件？我之前用的插件是lhgDialog，是这样封装的：
/*** lhgdialog 弹出框封装* @param 参数*/(function ($) {$.extend({iDialog: function (param) {if (typeof (param) == "object") {var api;if (frameElement && frameElement.api) {api = frameElement.api;$.dialog.setting.zIndex++;}else {$.dialog.setting.zIndex = 1977;}var max = false;if (!param.width && !param.height) {param.width = $(top.window).width() - 18;param.height = $(top.window).height() - 45;param.drag = false;max = true;}var defaultParam = $.extend({max: false,min: false,drag: true,lock: true,top: "50%",width: '800px',resize: false,parent: api}, param);if (max) {$.dialog(defaultParam).max();} else {$.dialog(defaultParam);}} else if (typeof (param) == "string" && param == "close") {if (frameElement.api.opener.reloadgrid) {frameElement.api.opener.reloadgrid();}else if (frameElement.api.opener.refresh) {frameElement.api.opener.refresh();} else {frameElement.api.opener.location = frameElement.api.opener.location;}frameElement.api.close();}else {alert("iDialog参数错误");}}});})(jQuery);
View Code
这样使用：
$.iDialog({title: '报告流转过程',height: "500px",width: "800px",content: "url:/ViewReport/ViewReport/ReportFlow?ReportCode=" + row.REPORTCODE});
View Code
存在的问题：1、弹出两层窗口，当关闭子窗口时，遮罩层没了，而父窗口还在，这显然是BUG，为什么官网上的Demo是正常的呢？因为它对插件加载有要求，我是在Layout里加载的，所以，所有页面都将这个插件加载一遍，这就是导致BUG的原因。2、如果父页面是Index，弹出Edit窗体，再在Edit窗体里弹出Add窗体，那么在Add窗体里调用方法alert(frameElement.api.opener.location.href);那么提示的url是Index的url而不是Edit的url，这样子窗体能找到父窗体的父页面，而找不到父窗体。
花了一两天时间，终于解决遮罩层问题，代码如下：
/*!* 框架页面卸载前关闭所有穿越的对话框* 同时移除拖动层和遮罩层*/_top != window && $(window).bind('unload',function(){var bl = true; //此处修改var list = lhgdialog.list;for( var i in list ){if (list[i]) {//此处修改if (!lhgdialog.list[i]._lock && !lhgdialog.list[i].parent) {bl = false;}list[i].close();}}_singleton && _singleton.DOM.wrap.remove();_$doc.unbind('keydown',onKeyDown);if (bl) { //此处修改$('#ldg_lockmask', _doc)[0] && $('#ldg_lockmask', _doc).remove();$('#ldg_dragmask', _doc)[0] && $('#ldg_dragmask', _doc).remove();}});
View Code
父子页面的问题也已解决，代码在上面。
