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 相关文章推荐
麦鸡的TAB切换功能结合了javascript和css
Dec 17 Javascript
javascript开发随笔二 动态加载js和文件
Nov 25 Javascript
开发中可能会用到的jQuery小技巧
Mar 07 Javascript
js库Modernizr的介绍和使用
May 07 Javascript
使用impress.js制作幻灯片
Sep 09 Javascript
Vuejs第十一篇组件之slot内容分发实例详解
Sep 09 Javascript
浅谈AngularJS中ng-class的使用方法
Nov 11 Javascript
js实现微博发布小功能
Jan 12 Javascript
ES6新特性之Symbol类型用法分析
Mar 31 Javascript
10分钟上手vue-cli 3.0 入门介绍
Apr 04 Javascript
node事件循环和process模块实例分析
Feb 14 Javascript
JavaScript基于SVG的图片切换效果实例代码
Dec 15 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使用正则表达式提取字符串中尖括号、小括号、中括号、大括号中的字符串
2020/04/05 PHP
thinkPHP5框架实现基于ajax的分页功能示例
2018/06/12 PHP
JavaScript语句可以不以;结尾的烦恼
2007/03/08 Javascript
DOMAssitant最新版 DOMAssistant 2.5发布
2007/12/25 Javascript
JavaScript 继承详解(三)
2009/07/13 Javascript
jquery validation插件表单验证的一个例子
2010/03/03 Javascript
使用简洁的jQuery方法实现隔行换色功能
2014/01/02 Javascript
用js闭包的方法实现多点标注冒泡示例
2014/05/29 Javascript
JS实现可点击展开与关闭的左侧广告代码
2015/09/02 Javascript
任意Json转成无序列表的方法示例
2016/12/09 Javascript
Bootstrap超大屏幕的实现代码
2017/03/22 Javascript
Vue中建立全局引用或者全局命令的方法
2017/08/21 Javascript
详解webpack进阶之loader篇
2017/08/23 Javascript
Bootstrap table 服务器端分页功能实现方法示例
2020/06/01 Javascript
[01:27]2014DOTA2展望TI 剑指西雅图IG战队专访
2014/06/30 DOTA
python以环状形式组合排列图片并输出的方法
2015/03/17 Python
Django框架中render_to_response()函数的使用方法
2015/07/16 Python
解决Matplotlib图表不能在Pycharm中显示的问题
2018/05/24 Python
pyqt5 使用cv2 显示图片,摄像头的实例
2019/06/27 Python
Python assert关键字原理及实例解析
2019/12/13 Python
python 6.7 编写printTable()函数表格打印(完整代码)
2020/03/25 Python
用python实现学生管理系统
2020/07/24 Python
PyQt5多线程防卡死和多窗口用法的实现
2020/09/15 Python
Kmeans均值聚类算法原理以及Python如何实现
2020/09/26 Python
夏威夷航空官网:Hawaiian Airlines
2016/09/11 全球购物
北美领先的牛仔品牌:Buffalo David Bitton
2017/05/22 全球购物
电信专业毕业生推荐信
2013/11/18 职场文书
分厂厂长岗位职责
2013/12/29 职场文书
家居饰品店创业计划书
2014/01/31 职场文书
党建示范点实施方案
2014/03/12 职场文书
法人代表委托书
2014/04/04 职场文书
终止合同协议书
2014/04/17 职场文书
中国梦演讲稿范文
2014/08/28 职场文书
2015年科研工作总结范文
2015/05/13 职场文书
毕业论文致谢信
2015/05/14 职场文书
出纳试用期工作总结2015
2015/05/28 职场文书