jQuery使用模式窗口实现在主页面和子页面中互相传值的方法
更新时间：2016年03月01日 10:42:05 作者：yenange
这篇文章主要介绍了jQuery使用模式窗口实现在主页面和子页面中互相传值的方法,涉及jQuery模式窗口及参数传递相关技巧,需要的朋友可以参考下
本文实例讲述了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相关内容感兴趣的读者可查看本站专题：《jQuery操作xml技巧总结》、《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
相关文章
这篇文章主要介绍的是自己用jQuery写了一个图片的马赛克消失效果实现过程,需要的朋友可以参考下2014-05-05
找了个时间看了下EasyUI插件，对它的插件感觉是很舒服，特地把Easy UI的大部分功能属性做了一下汇总。使用easyUI的朋友可以收藏下。2011-01-01
asp.net下使用jquery 的ajax+WebService+json 实现无刷新取后台值的实现代码
asp.net下使用jquery 的ajax+WebService+json 实现无刷新取后台值的实现代码 ，比页面刷新更好，用户体验更好，需要的朋友可以参考下。2010-09-09
点赞，网络用语，表示“赞同”、“喜爱”。今天小编通过实例代码给大家分享jQuery实现点击关注和取消功能，需要的朋友参考下吧2017-07-07
这篇文章主要介绍了jQuery实现导航高亮的方法,涉及针对鼠标事件的相应及页面元素属性动态变换的相关操作技巧,并附带demo源码供读者下载,需要的朋友可以参考下2016-11-11
jQuery UI Dialog 创建友好的弹出对话框实现代码
jQuery UI Dialog是jQuery UI的弹出对话框组件，使用它可以创建各种美观的弹出对话框；它可以设置对话框的标题、内容，并且使对话框可以拖动、调整大小、及关闭；平常主要用来替代浏览嚣自带的alert、confirm、open等方法2012-04-04
这篇文章主要介绍了jQuery实现炫丽的3d旋转星空效果,涉及jQuery数值运算与页面元素属性动态变换相关操作技巧,需要的朋友可以参考下2018-07-07
这篇文章介绍了jquery ui dialog实现弹窗特效的思路及代码，有需要的朋友可以参考一下2013-08-08
这篇文章主要介绍了基于jQuery的checkbox全选问题,结合实例形式分析了jQuery实现全选功能中遇到的问题与相应的解决方法,需要的朋友可以参考下2016-11-11
本文主要介绍了JQuery将字符串转为json对象的四种方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-04-04
最新评论