jQuery使用模式窗口实现在主页面和子页面中互相传值的方法


Posted in Javascript onMarch 01, 2016

本文实例讲述了jQuery使用模式窗口实现在主页面和子页面中互相传值的方法。分享给大家供大家参考,具体如下:

主面面:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
function openWindow() {
  var oldValue = { Name:$("#Name").val(),Age:$("#Age").val() };
  var result = popModal("window.html", 300, 200, oldValue);
  if (result!=null && typeof (result) != "undefined") {
    $("#Name").val(result.Name);
    $("#Age").val(result.Age);
  }
}
//=====================================================================
//作  者:yenange , 20120525
//功能说明: 弹出一个模式窗口 (测试:IE6/7/8 和 Firefox 正常, Chrome可以弹出, 但长宽有变而且不是模式, 它本身不支持)
//输入参数: 路径,宽度,高度,参数(可选)
function popModal(url, width, height, parameter ) {
  var feature = 'dialogWidth=' + width+'px'
+ ';dialogHeight=' + height + 'px'
+ ';dialogTop=' + (screen.height - height) / 2 + 'px'
+ ';dialogLeft=' + (screen.width - width) / 2 + 'px'
+ ';help:no;resizable:no;status=no;scroll:no';
  if(typeof(parameter)=="undefined")
    return window.showModalDialog(url, feature);
  else
    return window.showModalDialog(url, parameter, feature);
}
//=====================================================================
//功能说明: 弹出一个窗口
//输入参数: 路径,窗口名称,宽度,高度
function pop(helpurl, windowName, width, height) {
  var feature ='width=' + width
    + ',height=' + height
    + ',top=' + (screen.height - height) / 2
    + ',left=' + (screen.width - width) / 2
    +',toolbar=no,menubar=no,scrollbars=yes,resizable=no,location=no,status=no';
  window.open(helpurl, windowName, feature);
}
</script>
</head>
<body>
  <div>
    名字<input id="Name" type="text" /><br />
    年龄<input id="Age" type="text" /><br />
    <input id="Button1" type="button" value="打开模式窗口" onclick="openWindow()" />
  </div>
</body>
</html>

子页面:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
  var param = window.dialogArguments;
  $("#Name").val(param.Name);
  $("#Age").val(param.Age);
});
function closeWindow() {
  var result = {};
  result.Name = $("#Name").val();
  result.Age = $("#Age").val();
  window.returnValue = result;
  window.close();
}
</script>
</head>
<body>
  <div>
    名字<input id="Name" type="text" /><br />
    年龄<input id="Age" type="text" /><br />
    <input id="Button1" type="button" value="关闭模式窗口" onclick="closeWindow()" />
  </div>
</body>
</html>

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
javascript 去字符串空格终极版(支持utf8)
Nov 14 Javascript
Confirmer JQuery确认对话框组件
Jun 09 Javascript
javascript按位非运算符的使用方法
Nov 14 Javascript
jQuery处理图片加载失败的常用方法
Jun 08 Javascript
详解AngularJS中的表格使用
Jun 16 Javascript
JS实现带有3D立体感的银灰色竖排折叠菜单代码
Oct 20 Javascript
JS添加删除DIV的简单实例
Jul 08 Javascript
JS简单设置下拉选择框默认值的方法
Aug 20 Javascript
Kotlin学习第一步 kotlin语法特性
May 25 Javascript
从parcel.js打包出错到选择nvm的全部过程
Jan 23 Javascript
vue组件之间的数据传递方法详解
Apr 19 Javascript
JavaScript实现简单的图片切换功能(实例代码)
Apr 10 Javascript
jQuery获取某天的农历日期并判断是否除夕或新年的方法
Mar 01 #Javascript
jQuery实现获取table表格第一列值的方法
Mar 01 #Javascript
JavaScript Date对象详解
Mar 01 #Javascript
JavaScript通过使用onerror设置默认图像显示代替alt
Mar 01 #Javascript
jQuery增加与删除table列的方法
Mar 01 #Javascript
JavaScript如何实现组合列表框中元素移动效果
Mar 01 #Javascript
JavaScript常用函数工具集:lao-utils
Mar 01 #Javascript
You might like
PHP循环遍历数组的3种方法list()、each()和while总结
2014/11/19 PHP
Symfony数据校验方法实例分析
2015/01/26 PHP
php通过curl模拟登陆DZ论坛
2015/05/11 PHP
php无限级评论嵌套实现代码
2018/04/18 PHP
使用 PHP Masked Package 屏蔽敏感数据的实现方法
2019/10/15 PHP
Aster vs Newbee BO5 第二场2.19
2021/03/10 DOTA
各种效果的jquery ui(接口)介绍
2008/09/17 Javascript
使用GruntJS构建Web程序之安装篇
2014/06/04 Javascript
TypeScript 中接口详解
2015/06/19 Javascript
深入分析Javascript事件代理
2016/01/30 Javascript
AngularJS实现用户登录状态判断的方法(Model添加拦截过滤器,路由增加限制)
2016/12/12 Javascript
jQuey将序列化对象在前台显示地实现代码(方法总结)
2016/12/13 Javascript
Vue关于数据绑定出错解决办法
2017/05/15 Javascript
详解vue服务端渲染(SSR)初探
2017/06/19 Javascript
JS库之wow.js使用方法
2017/09/14 Javascript
动态加载JavaScript文件的3种方式
2018/05/05 Javascript
iview tabs 顶部导航栏和模块切换栏的示例代码
2019/03/04 Javascript
vue无限轮播插件代码实例
2019/05/10 Javascript
jQuery 添加元素和删除元素的方法
2020/07/15 jQuery
python base64 decode incorrect padding错误解决方法
2015/01/08 Python
Django卸载之后重新安装的方法
2017/03/15 Python
Python实现连接postgresql数据库的方法分析
2017/12/27 Python
实践Vim配置python开发环境
2018/07/02 Python
python实现websocket的客户端压力测试
2019/06/25 Python
python 串口读取+存储+输出处理实例
2019/12/26 Python
Python编程快速上手——疯狂填词程序实现方法分析
2020/02/29 Python
快速一键生成Python爬虫请求头
2021/03/04 Python
css3实现针线缝合效果(图解步骤)
2013/02/04 HTML / CSS
一款纯css3制作的2015年元旦雪人动画特效教程
2014/12/29 HTML / CSS
欧洲最大的笔和书写专家:The Pen Shop
2017/03/19 全球购物
采购部部门职责
2013/12/15 职场文书
中专毕业生的自荐书
2014/07/01 职场文书
2014年外贸业务员工作总结
2014/12/11 职场文书
党员示范岗材料
2014/12/19 职场文书
老公保证书
2015/01/17 职场文书
代码解析React中setState同步和异步问题
2021/06/03 Javascript