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

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，是这样封装的：

(function ($) {  $.extend({    iDialog2: function (param) {      var api, W;      if (frameElement && frameElement.api) {        api = frameElement.api;        W = api.opener;      }      else {        api = null;        W = window;      }      var defaultParam = $.extend({        max: false,        min: false,        drag: true,        lock: true,        top: "50%",        width: '800px',        resize: false,        parent: api      }, param);      W.$.dialog(defaultParam);    }  });})(jQuery);

View Code

    这样使用：

$.iDialog2({  title: '修改',  height: 200,  width: 300,  content: "url:/Auth/UserManage/Edit?id=" + row.Id});

View Code

    存在的问题：1、弹出两层窗口，当关闭子窗口时，遮罩层没了，而父窗口还在，这显然是BUG，为什么官网上的Demo是正常的呢？因为它对插件加载有要求，我是在Layout里加载的，所以，所有页面都将这个插件加载一遍，这就是导致BUG的原因。2、如果父页面是Index，弹出Edit窗体，再在Edit窗体里弹出Add窗体，那么在Add窗体里调用方法alert(frameElement.api.opener.location.href);那么提示的url是Index的url而不是Edit的url，这样子窗体能找到父窗体的父页面，而找不到父窗体。

 

原标题：JS弹出框插件zDialog再次封装

关键词：JS