JS弹出框插件zDialog再次封装

zDialog插件网址:http://www.jq22.com/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);

弹出最大化窗口(因插件本身的原因,最大化窗口比实际window大小略小一点):

//弹出最大化窗口
$.iDialog({
title: "修改",
url: "/Auth/UserManage/Edit?id=" + row.Id,
OkEvent: function () {
reloadgrid(); //调用方法刷当前页面,即弹出框的父页面
}
});

弹出一般窗口:

$.iDialog({
title: "添加",
url: "/Auth/UserManage/Add",
width: 500,
height: 300,
OkEvent: function () {
save();
}
});

当窗口中的页面保存成功,需要刷新父窗口,这样调用:

parentDialog.OkEvent();
parentDialog.close();

当窗口中的页面保存成功时,传值给父页面,这样调用:

父页面:

$.iDialog({
title: "添加",
url: "/Auth/UserManage/Add",
width: 500,
height: 300,
OkEvent: function (userName) {
$("#UserName").val(userName)
}
});

子页面:

//保存
function save() {
parentDialog.OkEvent($("#UserName").val());
parentDialog.close();
}

子窗体如何关闭当前窗体,再关闭父窗体,并刷新父窗体的父页面 :

子窗体中数据保存完成后,这样调用:

parentDialog.OkEvent(parentDialog);

子窗体的父窗体中这样调用:

$.iDialog({
title: "添加",
url: "/Auth/UserManage/Add",
width: 800,
height: 400,
OkEvent: function (childDialog) {
parentDialog.OkEvent(); //刷新父窗体的父页面
childDialog.close(); //先关子窗体
parentDialog.close(); //再关父窗体
}
});

封装后,该插件的特点:多层弹出,且弹出到框架的最顶层;使用方便,代码简捷;可以方便地刷新父页面,可以方便地向父页面传值。

示意图:

JS弹出框插件zDialog再次封装

为什么要封装这个插件?我之前用的插件是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);

这样使用:

$.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,这样子窗体能找到父窗体的父页面,而找不到父窗体。

花了一两天时间,终于解决遮罩层问题,代码如下:

/*!
* 框架页面卸载前关闭所有穿越的对话框
* 同时移除拖动层和遮罩层
*/
_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();
}
});

父子页面的问题也已解决,代码在上面。

上一篇:【Alpha冲刺阶段】Scrum Meeting Daily2


下一篇:大碗宽面Alpha冲刺阶段博客目录