window.showModalDialog()总结

时间：5年前阅读：4648

//创建一个显示html内容的模态对话框：

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

//创建一个显示html内容的非模态对话框：

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

sURL:(必选参数)字符串..指定要显示的文档的URL

vArguments:任意类型..想要显示的页面传递参数..参数可以使用window.dialogArguments来获取

sFeatures:字符串..指定对话框的样式..里面可以定义一个也可以多个使用分号";"分开

1、 dialogHeight: 对话框高度，不小于100px

2、 dialogWidth: 对话框宽度。

3、 dialogLeft: 离屏幕左的距离。

4、 dialogTop: 离屏幕上的距离。

5、 center: { yes | no | 1 | 0 } ：是否居中，默认yes，但仍可以指定高度和宽度。

6、 help: {yes | no | 1 | 0 }：是否显示帮助按钮，默认yes。

7、 resizable: {yes | no | 1 | 0 } [IE5+]：是否可被改变大小。默认no。

8、 status: {yes | no | 1 | 0 } [IE5+]：是否显示状态栏。默认为yes[ Modeless]或no[Modal]。

9、 scroll: { yes | no | 1 | 0 | on | off }：是否显示滚动条。默认为yes。

父窗口:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		      <script type="text/javascript">
          function openWin(){
              window.showModalDialog("a2.jsp",window,"dialogHeight:300px;dialogWidth:380px;status=no;help:yes;");
          }
          
          function setValue(cid,cname){
              document.getElementById("cid").value=cid;
              document.getElementById("cname").value=cname;
          }
      </script>
	</head>
	<body>
		   <form action="test.jsp" name="form1" method="post">
       客户id：<input type="text" name="cid" value="" id="cid"/><br>
       客户名称:<input type="text" name="cname" value="" id="cname">
       <input type="button" name="ok" value="请选择客户" onclick="openWin();">
   </form>
	</body>
</html>

子窗口:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
  <script type="text/javascript">
      function viewData(cid,cname){
          //alert(cid+"  "+cname);
          /*
           *父窗体页面的window对象
           *子窗体页面的window.dialogArguments对象中封装的是父窗体页面的信息
           */
           var sdata=window.dialogArguments;  /*sdata封装的是父窗体页面的信息*/
          //alert(sdata);
          sdata.setValue(cid,cname);;
          window.close();
      }
  </script>
	</head>
	<body>
    <table border="1">
        <tr>
            <td>操作</td>
            <td>客户id</td>
            <td>客户名称</td>
        </tr>
        <tr>
            <td><input type="button" value="选择" id="ss" onclick="viewData('001','好吃的01');"/></td>
            <td>01</td>
            <td>好吃的01</td>
        </tr>
        <tr>
            <td><input type="button" value="选择" id="ss" onclick="viewData('002','好看的02');"/></td>
            <td>02</td>
            <td>好看的02</td>
        </tr>
    </table>
	</body>
</html>

本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。

微信扫码关注

更新实时通知

window.showModalDialog()总结

网友评论