Of Stack

jQuery uses the modal window to pass values to and from the main page and child pages

  • 2021-01-18 06:18:37
  • OfStack

This article illustrates how jQuery uses the modal window to pass values to and from the main page and child pages. To share with you for your reference, as follows:

Primary side face: 


<!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);
  }
}
//=====================================================================
// As a    Re: yenange , 20120525
// Functional specifications :  The pop-up 1 Mode window   (test: IE6/7/8  and  Firefox  Normal,  Chrome You can pop it up,   But it varies in length and width and it's not a pattern,   It doesn't support itself.) 
// The input parameters :  The path , The width of the , highly , parameter ( optional )
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);
}
//=====================================================================
// Functional specifications :  The pop-up 1 A window 
// The input parameters :  The path , The window name , The width of the , highly 
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>
     The name <input id="Name" type="text" /><br />
     age <input id="Age" type="text" /><br />
    <input id="Button1" type="button" value=" Open the mode window " onclick="openWindow()" />
  </div>
</body>
</html>

Child pages: 


<!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>
     The name <input id="Name" type="text" /><br />
     age <input id="Age" type="text" /><br />
    <input id="Button1" type="button" value=" Close mode window " onclick="closeWindow()" />
  </div>
</body>
</html>

More about jQuery related topics: interested readers to view this site "jQuery xml operation skills summary", "jQuery drag effects and skills summary", "jQuery extension techniques", "the classic jQuery common effects summary", "jQuery animation and special effects usage summary", "law of jquery choice for summary" and "jQuery common plug-in and usage summary"

Hope this article described to everyone jQuery program design is helpful.

Related articles: