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,是这样封装的:

/**
* 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

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

转载于:https://www.cnblogs.com/s0611163/p/5128776.html

JS弹出框插件zDialog再次封装相关推荐

  1. 弹出框插件layer使用

    layer是一款近年来备受青睐的web弹层组件,她具备全方位的解决方案,致力于服务各水平段的开发人员,您的页面会轻松地拥有丰富友好的操作体验. 插件官方地址:http://layer.layui.co ...

  2. simpleAlert.js弹出对话框插件

    下载地址 simpleAlert.js是一款弹出对话框插件,实用的alert弹出框插件. dd:

  3. js 弹出框 背景不滑动 方案

    这是一个系列,记录我前端开发常用的代码,小常识,有些是参考网上代码,(讲的可能有点烂,求不要打脸,嘤嘤嘤~~)送给那些需要的人.可以相互交流,喜欢的加我吧. Wx: Lxp911221 js 弹出框 ...

  4. jquery 左右移动 以及使用layer.js弹出框呈现在页面上

    今天写了一个左右移动 但是发现自己写的css效果一直都加不上去,不管了,还是先上自己有问题的代码,毕竟在失败中发现问题也是一种成长么. 好吧,其实我们都知道在列表有边框里,它的值来源于左边框,那么如果 ...

  5. messagrbox自定义按钮c语言,基于dialogbox修改可自定义按钮及事件的弹出框插件

    插件描述:基于dialogbox1.0修改可自定义按钮及事件的弹出框插件,每个按钮可绑定单独的触发事件,并且能支持将弹出框作为一个表单来填入数据并获取 $('body').dialogbox({ ty ...

  6. js弹出框,点击切换事件,jQuery改变一部分css样式

    文章目录 js,声明变量注意点 js弹出框 js.flag=0的使用 js,隐藏样式 jquery改变css样式 js,声明变量注意点 <script>// 声明多个变量 var age= ...

  7. php点击文字弹出js提示框,js弹出框、对话框、提示框、弹窗实现方法总结(推荐)...

    一.JS的三种最常见的对话框 //====================== JS最常用三种弹出对话框 ======================== //弹出对话框并输出一段提示信息 funct ...

  8. html登入弹框插件,基于jQuery的弹出框插件

    html如下: $(function() { $("#btn01").popwin({ element: "#box01", title: "请填写以 ...

  9. 如何妥善处理WebBrowser对Javascript的错误问题,阻止JS弹出框,提高用户体验(原创)...

    由于项目需求,最近转战客户端,开始搞浏览器开发.众所周知,现在在微软平台上开发浏览器,最常用的方法就是扩展Webbrowser,但是首先要清楚的是,WebBrowser控件仅仅是对WebBrowser ...

  10. 原生js 弹出框;弹出效果 定时关闭

    关于原生js的弹出框样式 淡出淡入效果; <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> ...

最新文章

  1. ubuntu 16.04 ROS + kinect v2 安装
  2. 安装仪表盘控件Iocomp会遇到的几个常见问题
  3. oracle数据库7个安装包,Oracle 11gR2(11.2.0.4)安装包(7个)作用说明
  4. google怎么做(2.相似网页算法)
  5. cloudfoundry_在Cloudfoundry上部署RESTful服务
  6. echo 多行_Java中Scanner的用法:单行多行输入
  7. ANDROID STUDIO系列教程二--基本设置与运行
  8. MYSQL 源代码编绎脚本
  9. BZOJ 4011 HNOI2015 落忆枫音
  10. 【浙江大学PAT真题练习乙级】1004 成绩排名 (20分) 真题解析
  11. [2019沈阳网络赛D题]Dawn-K's water(点分治)
  12. 原生js实现简单的svg编辑器
  13. ps怎么对字体进行加粗?
  14. 单元测试--Mockito之spy
  15. java 关键字 assert的学习
  16. 计算机中丢失msvcp120.dll是什么意思,win7系统玩游戏提示“msvcp120.dll丢失”怎么修复...
  17. Coroutine协成
  18. 汉洛塔问题的递归解决方法
  19. 前端知识大全 - 收藏集 - 掘金
  20. java switch case null_如何在switch中使用null

热门文章

  1. python 表白程序代码_程序员python表白代码
  2. 蓝桥杯2020年第十一届C/C++国赛C组第一题-约数个数
  3. css 设置文本文字溢出省略号显示
  4. Ubuntu 挂载磁盘
  5. 7-2 组织星期信息 (10 分)
  6. WPF多线程更新UI的一个解决途径
  7. linux BufferedImage.createGraphics()卡住不动
  8. Chrome上网问题解决记录
  9. lintcode-397-最长上升连续子序列
  10. C#6.0新特性的尝试