jQuery使用模式窗口实现在主页面和子页面中互相传值的方法

前端技术 2023/09/05 JavaScript

本文实例讲述了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程序设计有所帮助。

本文地址：https://www.stayed.cn/item/13862

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案