简要咨询咨询QQ网站导航网站搜索手机站点联系我们设为首页加入收藏 

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

来源:易贤网   阅读:1144 次  日期:2016-08-04 15:28:17

温馨提示:易贤网小编为您整理了“jQuery使用模式窗口实现在主页面和子页面中互相传值的方法”,方便广大网友查阅!

这篇文章主要介绍了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程序设计有所帮助。

更多信息请查看网络编程
点此处就本文及相关问题在本站进行非正式的简要咨询(便捷快速)】     【点此处查询各地各类考试咨询QQ号码及交流群
上一篇:JS显示日历和天气的方法
下一篇:jQuery获取某天的农历日期并判断是否除夕或新年的方法
易贤网手机网站地址:jQuery使用模式窗口实现在主页面和子页面中互相传值的方法
由于各方面情况的不断调整与变化,易贤网提供的所有考试信息和咨询回复仅供参考,敬请考生以权威部门公布的正式信息和咨询为准!