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 scroll()区分横向纵向滚动条的方法
Apr 04 Javascript
jQuery实现的支持IE的html滑动条
Mar 16 Javascript
JS中的Replace方法使用经验分享
May 20 Javascript
深入理解jQuery 事件处理
Jun 14 Javascript
用js实现简单算法的实例代码
Sep 24 Javascript
ExtJS 4.2 Grid组件单元格合并的方法
Oct 12 Javascript
微信小程序 loading(加载中提示框)实例
Oct 28 Javascript
JS填写银行卡号每隔4位数字加一个空格
Dec 19 Javascript
Vue数据驱动模拟实现1
Jan 11 Javascript
jQuery实现三级联动效果
Mar 02 Javascript
解决vue2.x中数据渲染以及vuex缓存的问题
Jul 13 Javascript
详解JQuery基础动画操作
Apr 12 jQuery
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常用代码
2006/11/23 PHP
php print EOF实现方法
2009/05/21 PHP
php存储过程调用实例代码
2013/02/03 PHP
javascript Array.sort() 跨浏览器下需要考虑的问题
2009/12/07 Javascript
JQuery实现倒计时按钮具体方法
2013/11/14 Javascript
Jquery下EasyUI组件中的DataGrid结果集清空方法
2014/01/06 Javascript
js点击返回跳转到指定页面实现过程
2020/08/20 Javascript
js从数组中删除指定值(不是指定位置)的元素实现代码
2016/09/13 Javascript
移动端js图片查看器
2016/11/17 Javascript
Vue.js实现实例搜索应用功能详细代码
2017/08/24 Javascript
JavaScript多线程运行库Nexus.js详解
2017/12/22 Javascript
浅谈FastClick 填坑及源码解析
2018/03/02 Javascript
JS实现显示当前日期的实例代码
2018/07/03 Javascript
Vue.use()在new Vue() 之前使用的原因浅析
2019/08/26 Javascript
layui table数据修改的回显方法
2019/09/04 Javascript
js实现内置计时器
2019/12/16 Javascript
AngularJs的$http发送POST请求,php无法接收Post的数据问题及解决方案
2020/08/13 Javascript
js实现移动端图片滑块验证功能
2020/09/29 Javascript
PHP魔术方法__ISSET、__UNSET使用实例
2014/11/25 Python
在Django的URLconf中使用命名组的方法
2015/07/18 Python
在Django的session中使用User对象的方法
2015/07/23 Python
python3下实现搜狗AI API的代码示例
2018/04/10 Python
python3+PyQt5实现拖放功能
2018/04/24 Python
使用pandas的box_plot去除异常值
2019/12/10 Python
Python异常原理及异常捕捉实现过程解析
2020/03/25 Python
一张图片能隐含千言万语之隐藏你的程序代码
2012/12/13 HTML / CSS
详解WebSocket跨域问题解决
2018/08/06 HTML / CSS
英国的潮牌鞋履服饰商店:size?
2019/03/26 全球购物
Ajax和javascript的区别
2013/07/20 面试题
客服文员岗位职责
2013/11/29 职场文书
大学生村官考核材料
2014/05/23 职场文书
设备收款委托书范本
2014/10/02 职场文书
房屋过户委托书范本
2014/10/07 职场文书
医院领导班子四风问题对照检查材料
2014/10/26 职场文书
全国爱牙日活动总结
2015/02/05 职场文书
MySql学习笔记之事务隔离级别详解
2021/05/12 MySQL