jQuery uses modal window to realize the method of transferring values to each other in the main page and sub-page

jQuery uses modal window to realize the method of transferring values to each other in the main page and sub-page_jquery

WBOY

Release： 2016-05-16 15:12:53

Original

1692 people have browsed it

The example in this article describes how jQuery uses modal windows to transfer values to each other between the main page and sub-pages. Share it with everyone for your reference, the details are as follows:

Main noodles:

<!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>

Copy after login

Sub-page:

<!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>

Copy after login

Readers who are interested in more jQuery-related content can check out the special topics of this site: "Summary of jQuery operation xml skills", "Summary of jQuery drag effects and skills", " JQuery extension skills summary", "jQuery common classic special effects summary", "jQuery animation and special effects usage summary", jquery selector usage summary " and "Summary of common jQuery plug-ins and usage"

I hope this article will be helpful to everyone in jQuery programming.