JS中showModalDialog 的使用解析

  基本介绍:

  window.showModalDialog()         方法用来创建一个显示HTML内容的模态对话框。(就是打开后不能操作父窗口,只能等模式                                      窗口关闭时才能操作)

  window.showModelessDialog()        方法用来创建一个显示HTML内容的非模态对话框。(就是打开后仍然可以进行其他的操作)    

  使用方法:

  vReturnValue = window.showModalDialog(sURL [, vArguments] [,sFeatures])

  vReturnValue = window.showModelessDialog(sURL [, vArguments] [,sFeatures])

  参数说明:

  sURL          --  必选参数,类型:字符串。用来指定对话框要显示的文档的URL。

  vArguments    -- 可选参数,类型:变体。用来向对话框传递参数。传递的参数类型不限,包括数组等。对话框通过                         window.dialogArguments来取得传递进来的参数。

  sFeatures     -- 可选参数,类型:字符串。用来描述对话框的外观等信息,可以使用以下的一个或几个,用分号“;”隔开。

  -------------------------------

  参数传递:

  1. 要想对话框传递参数,是通过vArguments来进行传递的。类型不限制,对于字符串类型,最大为4096个字符。也可以传递对象.

  parent.html

  

复制代码 代码如下:

  <body>

  用户名:

  <input id="usernameID" type="text" readonly/>

  <input id="buttonID" type="button" value="选择输入" />

  <script type="text/javascript">

  var sURL = "showModalDialog2.html";

  //将父窗口对象传给子窗口

  var vArguments = window;

  var sFeatures = "dialogHeight:200px;dialogWidth:450px";

  document.getElementById("buttonID").onclick = function(){

  //单击"选择输入"按钮,弹出对话框以供选择输入

  window.showModalDialog(sURL,vArguments,sFeatures);

  }

  </script>

  </body>

  children.html

  

复制代码 代码如下:

  <body>

  <script type="text/javascript">

  //单击"选择输入"按钮后,会将对应的值显示在父窗口文本框中

  //接收父窗口传过来的对象

  var fatherWindow = window.dialogArguments;

  function selectInput(inputElement){

  //取得用户名

  var username = inputElement.parentNode.nextSibling.firstChild.nodeValue;

  //将用户名设置到父窗口相关的位置

  fatherWindow.document.getElementById("usernameID").value = username;

  }

  </script>

  <table border="1" align="center">

  <tr>

  <th>

  操作

  </th>

  <th>

  用户名

  </th>

  </tr>

  <tr>

  <td>

  <input type="button" value="选择输入" onclick="selectInput(this)" />

  </td>

  <td>

  张三

  </td>

  </tr>

  </table>

  </body>

  最终结果:

  2.可以通过window.returnValue向打开对话框的窗口返回信息,可以是布尔值,整型值等以外还可以是个js数组,当然也可以是对象.

  parent.html

  

复制代码 代码如下:

  <script type="text/javascript">

  /**

  *通过controller转向在模拟窗口加载JSP页面

  **/

  function selectUserList(param) {

  var sURL = "${pageContext.request.contextPath}/SelectUserController/selUser.do?checkTip="+param.checkType+"®Field="+param.regField";

  var vArguments = window;

  var sFeatures = "scrollbars=no;resizable=no;help=no;status=no;center:yes;dialogHeight=580px;dialogWidth=776px"";

  return window.showModalDialog(sURL,vArguments,sFeatures);

  }

  /**

  *通过JSON传值,并返回JSON数组

  **/

  function getUser(){

  var retValue = selectUserList({'checkType':'','regField':'more'});

  </script>