JS弹出框插件zDialog再次封装
zDialog插件网址:http://www.jq22.com/jquery-info2426
再次封装zDialog的代码:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
(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);
弹出最大化窗口(因插件本身的原因,最大化窗口比实际window大小略小一点):
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
//弹出最大化窗口 $.iDialog({ title: "修改", url: "/Auth/UserManage/Edit?id=" + row.Id, OkEvent: function () { reloadgrid(); //调用方法刷当前页面,即弹出框的父页面 } });
弹出一般窗口:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
$.iDialog({ title: "添加", url: "/Auth/UserManage/Add", width: 500, height: 300, OkEvent: function () { save(); } });
当窗口中的页面保存成功,需要刷新父窗口,这样调用:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
parentDialog.OkEvent();
parentDialog.close();
当窗口中的页面保存成功时,传值给父页面,这样调用:
父页面:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
$.iDialog({ title: "添加", url: "/Auth/UserManage/Add", width: 500, height: 300, OkEvent: function (userName) { $("#UserName").val(userName) } });
子页面:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
//保存 function save() { parentDialog.OkEvent($("#UserName").val()); parentDialog.close(); }
子窗体如何关闭当前窗体,再关闭父窗体,并刷新父窗体的父页面 :
子窗体中数据保存完成后,这样调用:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
parentDialog.OkEvent(parentDialog);
子窗体的父窗体中这样调用:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
$.iDialog({ title: "添加", url: "/Auth/UserManage/Add", width: 800, height: 400, OkEvent: function (childDialog) { parentDialog.OkEvent(); //刷新父窗体的父页面 childDialog.close(); //先关子窗体 parentDialog.close(); //再关父窗体 } });
封装后,该插件的特点:多层弹出,且弹出到框架的最顶层;使用方便,代码简捷;可以方便地刷新父页面,可以方便地向父页面传值。
示意图:
为什么要封装这个插件?我之前用的插件是lhgDialog,是这样封装的:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
/** * 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);
这样使用:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
$.iDialog({ title: '报告流转过程', height: "500px", width: "800px", content: "url:/ViewReport/ViewReport/ReportFlow?ReportCode=" + row.REPORTCODE });
存在的问题:1、弹出两层窗口,当关闭子窗口时,遮罩层没了,而父窗口还在,这显然是BUG,为什么官网上的Demo是正常的呢?因为它对插件加载有要求,我是在Layout里加载的,所以,所有页面都将这个插件加载一遍,这就是导致BUG的原因。2、如果父页面是Index,弹出Edit窗体,再在Edit窗体里弹出Add窗体,那么在Add窗体里调用方法alert(frameElement.api.opener.location.href);那么提示的url是Index的url而不是Edit的url,这样子窗体能找到父窗体的父页面,而找不到父窗体。
花了一两天时间,终于解决遮罩层问题,代码如下:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
/*! * 框架页面卸载前关闭所有穿越的对话框 * 同时移除拖动层和遮罩层 */ _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(); } });
父子页面的问题也已解决,代码在上面。