showModalDialog参数说明

showModalDialog参数说明
showModalDialog() (Internet Explorer 4 and above)
showModelessDialog() (Internet Explorer 5 and above)

vReturnValue = window.showModalDialog(sURL[, vArguments][, sFeatures]);
vReturnValue = window.showModelessDialog(sURL[, vArguments][, sFeatures]); 其中:
vArguments 是要传到子窗体的参数;
sFeatures 指定子窗口显示的状态,与 window.open() 的相似; sFeatures 所用的参数:
dialogHeight: iHeight
dialogWidth: iWidth
dialogLeft: iXPos
dialogTop: iYPos
center: {yes | no | 1 | 0 }
help: {yes | no | 1 | 0 }
resizable: {yes | no | 1 | 0 } (Internet Explorer 5 and above)
status: {yes | no | 1 | 0 } (Internet Explorer 5 and above)

dialogWidth:18.5em; dialogHeight:17.5em; status:0; help:0



showModalDialog的参数用法及传回参数
利用vReturnValue = window.showModalDialog(sURL [, vArguments] [, sFeatures]),我们可以打开一个模态窗口,该窗口的优点是限制用户只能对当前的页面进行操作,而对其父页面不能进行操作,常用于向导或者信息获取页面。
利用其中的vArguments我们可以在父页面和弹出的页面中进行参数的传递,参数可以为自定义的对象,也可以传递父页面中任何一个控件的引用,这使得我们可以很容易的来操作父页面中的各个元素,使得参数的传递变得非常容易。
1. 自定义对象参数传递
我们可以定义一个javascript对象,然后定义各种自定义属性的值,然后可以将此对象传递到子页面中。
如:父页面sender.htm源代码为:

+展开
-HTML
<html> 
<script>
function show()
{
   var person = new Object();
   person.myName=myName.value;
   person.age = age.value;
   person.country = country.value;
   window.showModalDialog("target.htm",person,"");
}
</script>  
<body>
  <table>
    <tr>
      <td>
        name:</td>
      <td>
        <input id="myName"></td>
    </tr>
    <tr>
      <td>
        age:</td>
      <td>
        <input id="age"></td>
    </tr>
    <tr>
      <td>
        country:</td>
      <td>
        <input id="country"></td>
    </tr>
  </table>
  <br>
  <input type="button" value="open" onclick="show()">
</body>
</html>

弹出的子页面target.htm的源代码为:

+展开
-HTML
<html>
<body>
  <table>
    <tr>
      <td>
        name:</td>
      <td id="myName">
      </td>
    </tr>
    <tr>
      <td>
        age:</td>
      <td id="age">
      </td>
    </tr>
    <tr>
      <td>
        country:</td>
      <td id="country">
      </td>
    </tr>
  </table>
</body>

<script>
  var person = window.dialogArguments;
  myName.innerText = person.myName;
  age.innerText = person.age;
  country.innerText = person.country;
</script> 

</html>

上述的代码可以将父页面的信息封装成一个对象,然后将该对象传递给子页面。


2.父页面元素传递
以将父页面中元素对象的引用传递给子页面,通过该引用我们可以访问父页面中的该元素对象。
Sender.htm源代码:

+展开
-HTML
<html> 
<script>
function show()
{
   window.showModalDialog("target.htm",infoDiv,"");
}
</script> 

<body>
  <div id="infoDiv">
    <table id="infoTable">
      <tr>
        <td>
          name:</td>
        <td>
          <input id="myName"></td>
      </tr>
      <tr>
        <td>
          age:</td>
        <td>
          <input id="age"></td>
      </tr>
      <tr>
        <td>
          country:</td>
        <td>
          <input id="country"></td>
      </tr>
    </table>
  </div>
  <br>
  <input type="button" value="conveyElement" onclick="show()">
</body>
</html>

Target.htm源代码:
//其中利用元素对象的引用我们可以操纵父页面的元素对象的属性。

+展开
-HTML
<html>
<body>
  <div id="childDiv">
  </div>

  <script>
   var infoDiv = window.dialogArguments;
  </script> 

  <br>
  <input type="button" value="showInnerHtml" onclick='childDiv.innerHTML=infoDiv.innerHTML'>
  <br>
  <input type="button" value="changePColor" onclick='infoDiv.style.backgroundColor="lightgreen"'>
</body>
</html>
不过,在这里说多两句,在应用中,我们还可以从]showModalDialog弹出的对话页面把值传回给主页面,
+展开
-C#
Response.Write("<script language='javascript'>window.opener=null;window.returnValue = '" +你要传会父页面的变量值+ "';window.open('','_self');window.close();</script>");


加支付宝好友偷能量挖...


评论(0)网络
阅读(91)喜欢(1)JavaScript/Ajax开发技巧