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基于jQuery的表格悬停变色/恢复,表格点击变色/恢复,点击行选Checkbox
Aug 05 Javascript
jQuery EasyUI NumberBox(数字框)的用法
Jul 08 Javascript
js和jquery中循环的退出和继续学习记录
Sep 06 Javascript
使用Browserify配合jQuery进行编程的超级指南
Jul 28 Javascript
jQuery EasyUI基础教程之EasyUI常用组件(推荐)
Jul 15 Javascript
利用jQuery插件imgAreaSelect实现获得选择域的图像信息
Dec 02 Javascript
jquery广告无缝轮播实例
Jan 05 Javascript
jquery ajaxfileupload异步上传插件使用详解
Feb 08 Javascript
为什么使用koa2搭建微信第三方公众平台的原因
May 16 Javascript
JS实现简单的星期格式转换功能示例
Jul 23 Javascript
vue中@change兼容问题详解
Oct 25 Javascript
JS面向对象之单选框实现
Jan 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编程网上资源导航
2006/10/09 PHP
PHP 反向排序和随机排序代码
2010/06/30 PHP
php 变量未定义等错误的解决方法
2011/01/12 PHP
Php中用PDO查询Mysql来避免SQL注入风险的方法
2013/04/25 PHP
Moment.js 不容错过的超棒Javascript日期处理类库
2012/04/15 Javascript
浏览器打开层自动缓慢展开收缩实例代码
2013/07/04 Javascript
上传图片预览JS脚本 Input file图片预览的实现示例
2014/10/23 Javascript
JavaScript构造函数详解
2015/12/27 Javascript
js实现字符串和数组之间相互转换操作
2016/01/12 Javascript
BootStrap的弹出框(Popover)支持鼠标移到弹出层上弹窗层不隐藏的原因及解决办法
2016/04/03 Javascript
基于bootstrap插件实现autocomplete自动完成表单
2016/05/07 Javascript
浅谈JavaScript事件绑定的常用方法及其优缺点分析
2016/11/01 Javascript
JavaScript 计算笛卡尔积实例详解
2016/12/02 Javascript
Vue单页式应用(Hash模式下)实现微信分享的实例
2017/07/21 Javascript
解读vue生成的文件目录结构及说明
2017/11/27 Javascript
Node.js静态服务器的实现方法
2018/02/28 Javascript
vue裁切预览组件功能的实现步骤
2018/05/04 Javascript
bootstrap自定义样式之bootstrap实现侧边导航栏功能
2018/09/10 Javascript
Vue3 中的数据侦测的实现
2019/10/09 Javascript
使用Vue-cli3.0创建的项目 如何发布npm包
2019/10/10 Javascript
Python学习小技巧之列表项的拼接
2017/05/20 Python
Python实现感知机(PLA)算法
2017/12/20 Python
Python中asyncio与aiohttp入门教程
2018/10/16 Python
pycharm重置设置,恢复默认设置的方法
2018/10/22 Python
利用Django模版生成树状结构实例代码
2019/05/19 Python
python线程join方法原理解析
2020/02/11 Python
python 子类调用父类的构造函数实例
2020/03/12 Python
Python 程序员必须掌握的日志记录
2020/08/17 Python
移动端Html5中百度地图的点击事件
2019/01/31 HTML / CSS
最好的意大利皮夹克:D’Arienzo
2018/12/04 全球购物
英国信箱在线鲜花速递公司:Bloom & Wild
2019/03/10 全球购物
士力架广告词
2014/03/20 职场文书
工商局局长个人对照检查材料思想汇报
2014/09/23 职场文书
学校师德师风自我剖析材料
2014/09/29 职场文书
医院科室评语
2015/01/04 职场文书
2015年学校管理工作总结
2015/07/20 职场文书