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 相关文章推荐
jQuery 获取对象 根据属性、内容匹配, 还有表单元素匹配
May 31 Javascript
JavaScript高级程序设计 阅读笔记(四) ECMAScript中的类型转换
Feb 27 Javascript
《JavaScript高级编程》学习笔记之object和array引用类型
Nov 01 Javascript
jQuery实现的鼠标滑过弹出放大图片特效
Jan 08 Javascript
jQuery实现TAB选项卡切换特效简单演示
Mar 04 Javascript
【经典源码收藏】基于jQuery的项目常见函数封装集合
Jun 07 Javascript
利用JavaScript实现栈的数据结构示例代码
Aug 02 Javascript
动态创建Angular组件实现popup弹窗功能
Sep 15 Javascript
js 原生判断内容区域是否滚动到底部的实例代码
Nov 15 Javascript
JavaScript常见鼠标事件与用法分析
Jan 03 Javascript
小程序组件之自定义顶部导航实例
Jun 12 Javascript
使用Mock.js生成前端测试数据
Dec 13 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+DBM的同学录程序(4)
2006/10/09 PHP
PHP 类与构造函数解析
2017/02/06 PHP
php用wangeditor3实现图片上传功能
2019/08/22 PHP
PHP 计算两个时间段之间交集的天数示例
2019/10/24 PHP
Javascript 去除数组的重复元素
2010/05/04 Javascript
nodejs 后缀名判断限制代码
2011/03/31 NodeJs
JQuery将文本转化成JSON对象需要注意的问题
2011/05/09 Javascript
使用javascipt---实现二分查找法
2013/04/10 Javascript
JavaScript中prototype为对象添加属性的误区介绍
2013/10/15 Javascript
浅析JS异步加载进度条
2016/05/05 Javascript
javascript实现任务栏消息提示的简单实例
2016/05/31 Javascript
AngularJs Understanding the Controller Component
2016/09/02 Javascript
JavaScript中localStorage对象存储方式实例分析
2017/01/12 Javascript
浅谈react.js 之 批量添加与删除功能
2017/04/17 Javascript
JS实现小球的弹性碰撞效果
2017/11/11 Javascript
自己动手封装一个React Native多级联动
2018/09/19 Javascript
微信小程序实现顶部下拉菜单栏
2018/11/04 Javascript
用element的upload组件实现多图片上传和压缩的示例代码
2019/02/12 Javascript
[00:57]英雄,你的补给到了!
2020/11/13 DOTA
Python标准库之循环器(itertools)介绍
2014/11/25 Python
python 数据清洗之数据合并、转换、过滤、排序
2017/02/12 Python
python线程池threadpool实现篇
2018/04/27 Python
python中使用zip函数出现错误的原因
2018/09/28 Python
pyqt5实现登录界面的模板
2020/05/30 Python
Python爬虫使用浏览器cookies:browsercookie过程解析
2019/10/22 Python
selenium与xpath之获取指定位置的元素的实现
2021/01/26 Python
css3 给页面加个半圆形导航条主要利用旋转和倾斜样式
2014/02/10 HTML / CSS
美国领先的家庭智能音响系统品牌:Sonos
2018/07/20 全球购物
十岁生日父母答谢词
2014/01/18 职场文书
模特职业生涯规划范文
2014/02/26 职场文书
党员公开承诺书和承诺事项
2014/03/25 职场文书
运动员口号
2014/06/09 职场文书
全运会口号
2014/06/20 职场文书
篮球兴趣小组活动总结
2014/07/07 职场文书
入党积极分子考察意见
2015/06/02 职场文书
员工手册董事长致辞
2015/07/29 职场文书