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类和继承 prototype属性
Sep 03 Javascript
JavaScript高级程序设计(第3版)学习笔记6 初识js对象
Oct 11 Javascript
js 定时器setTimeout无法调用局部变量的解决办法
Nov 28 Javascript
浅谈jQuery中height与width
Jul 06 Javascript
JavaScrip常见的一些算法总结
Dec 28 Javascript
Javascript获取background属性中url的值
Oct 17 Javascript
jQuery实现页面顶部下拉广告
Dec 30 Javascript
bootstrap table分页模板和获取表中的ID方法
Jan 10 Javascript
深入理解vue.js中$watch的oldvalue与newValue
Aug 07 Javascript
angularjs数组判断是否含有某个元素的实例
Feb 27 Javascript
详解在React中跨组件分发状态的三种方法
Aug 09 Javascript
解决百度Echarts图表坐标轴越界的方法
Oct 17 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中利用wsdl创建标准webservice的实现代码
2011/12/07 PHP
一个简单的网页密码登陆php代码
2012/07/17 PHP
PHP中配置IIS7实现基本身份验证的方法
2015/09/24 PHP
PHP检查端口是否可以被绑定的方法示例
2018/08/09 PHP
PHP的mysqli_set_charset()函数讲解
2019/01/23 PHP
yii2.0框架数据库操作简单示例【添加,修改,删除,查询,打印等】
2020/04/13 PHP
jquery select(列表)的操作(取值/赋值)
2011/03/16 Javascript
JavaScript的类型、值和变量小结
2015/07/09 Javascript
总结jQuery插件开发中的一些要点
2016/05/16 Javascript
特殊日期提示功能的实现方法
2016/06/16 Javascript
详解Web使用webpack构建前端项目
2017/09/23 Javascript
mac上配置Android环境变量的方法
2018/07/08 Javascript
vue cli3.0结合echarts3.0与地图的使用方法示例
2019/03/26 Javascript
简单了解微信小程序 e.target与e.currentTarget的不同
2019/09/27 Javascript
bootstrap-table后端分页功能完整实例
2020/06/01 Javascript
详解JavaScript匿名函数和闭包
2020/07/10 Javascript
详解使用Python处理文件目录的相关方法
2015/10/16 Python
Python中模块与包有相同名字的处理方法
2017/05/05 Python
快速解决PyCharm无法引用matplotlib的问题
2018/05/24 Python
python GUI库图形界面开发之PyQt5单行文本框控件QLineEdit详细使用方法与实例
2020/02/27 Python
Python xlrd excel文件操作代码实例
2020/03/10 Python
Python中SQLite如何使用
2020/05/27 Python
python用tkinter实现一个gui的翻译工具
2020/10/26 Python
python复合条件下的字典排序
2020/12/18 Python
python中@contextmanager实例用法
2021/02/07 Python
新浪网技术部笔试题
2016/08/26 面试题
毕业设计计划书
2014/01/09 职场文书
国际贸易毕业生求职信范文
2014/02/21 职场文书
2014年五四青年节演讲比赛方案
2014/04/22 职场文书
党支部活动策划方案
2014/08/18 职场文书
"9.18"国耻日演讲稿范文
2014/09/14 职场文书
行为习惯主题班会
2015/08/14 职场文书
为什么mysql字段要使用NOT NULL
2021/05/13 MySQL
vue使用refs获取嵌套组件中的值过程
2022/03/31 Vue.js
Nginx 匹配方式
2022/05/15 Servers
多线程Spring通过@Scheduled实现定时任务
2022/05/25 Java/Android