模态窗口及传值过程 .

最新推荐文章于 2023-08-29 17:30:17 发布

h339678413

最新推荐文章于 2023-08-29 17:30:17 发布

阅读量3.2k

点赞数 4

文章标签： button function javascript 浏览器 input dialog

本文链接：https://blog.csdn.net/h339678413/article/details/7516482

版权

模态窗口分为模态与非模态，

模态窗口指在子窗口打开时，父窗口不能被激活的情况

而非模态窗口与此相对应，指在子窗口打开时，父窗口也可以被激活。

下面重点讲一下模态窗口：

使用方法：
vReturnValue = window.showModalDialog(sURL ,[ vArguments] ,[sFeatures])

共有三个参数，

第一个参数为子窗口的网址，

第二个参数为要传给子窗口的参数，可以有，也可以没有。它可以是任何形式，比如一个数组，一个对象，

第三个参数为子窗口的外观，即高，宽，有无状态栏等等

1.dialogHeight :对话框高度，不小于１００px，ＩＥ４中dialogHeight 和 dialogWidth 默认的单位是em，而ＩＥ５中是px，为方便其见，在定义modal方式的对话框时，用px做单位。
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 } ［ＩＥ５＋］：是否可被改变大小。默认no。
8.status: {yes | no | 1 | 0 } ［IE5+］：是否显示状态栏。默认为yes[ Modeless]或no[Modal]。
9.scroll:{ yes | no | 1 | 0 | on | off }：指明对话框是否显示滚动条。默认为yes。
下面几个属性是用在HTA中的，在一般的网页中一般不使用。
10.dialogHide:{ yes | no | 1 | 0 | on | off }：在打印或者打印预览时对话框是否隐藏。默认为no。
11.edge:{ sunken | raised }：指明对话框的边框样式。默认为raised。
12.unadorned:{ yes | no | 1 | 0 | on | off }：默认为no。

实例如下：

可以实现在子窗口中，即时更新父窗口的值

父窗口

<html>
<head>
<title>test1</title>
<script type ="text/javascript" language ="javascript" >
    var sColor = "";
    function callDialog() {

        var args = document.getElementById("oColor");
        window.showModalDialog("test2.htm",args, "status:false;dialogWidth:300px;dialogHeight:150px;dialogLeft:350px;dialogTop:350px;");
    }
    function update() {
        oColor.innerText = sColor;
    }
</script>
</head>
<body>
<p>输入你最喜欢的颜色: <input type ="text" value ="Yellow" id="oColor" style="color:red;font-size:24"/> </p>
<input type="button"   id ="button" value="Display Modeless Dialog"        οnclick="callDialog();"/>
</body>
</html>

子窗口

<html>
<head>
<title>test2.htm</title>
<script type ="text/javascript" language ="javascript">
    function getInfoAndUpdate() {
        var Obj = window.dialogArguments;//用window.dialogArguments来获取父窗口的参数
       // alert(Obj.value); 用来测试对象的值是否传进来
        Obj.value = document.getElementById('oEnterColor').value;    //修改父窗口的值
    }
    function cancel() {
        var callerWindowObj = dialogArguments;
        callerWindowObj.sColor = "Yellow";
        callerWindowObj.update(); }
</script>
</head>
<body>
输入你最喜欢的颜色:<input id="oEnterColor" onkeyup ="getInfoAndUpdate();"/><br /><br />
<input value="Ok" type ="button" οnclick="getInfoAndUpdate();window.close();"/>
<input value="Cancel" type ="button" οnclick="cancel();window.close();"/>aa
</body>
</html>

而非模态窗口与模态窗口的用法一样，只有方法名不而已。其实最关键的还是兼容性。

.兼容性

showModalDialog、showModelessDialog和open兼容性最好的是open方法了，这主要因为在W3C标准里Window 对象方法找不到showModalDialog和showModelessDialog，大部分标准浏览器和IE都支持window.open，而前面我说到大部分浏览器也支持showModalDialog函数，那是不完全支持。比如FF在3.0开始才支持showModalDialog（FF2.0是不支持的），chrome浏览器支持但却没有实现showModalDialog模态对话框的效果（形同使用window.open），而showModelessDialog可能是因为用处少，除IE外几乎都不支持

因此，非模态方法最好还是不要用的好，只有IE自己支持。因此建议非模态情况用open();方法

其实学到后面这些也都不会用了，用的是DIV 仿模态窗口，效果要好的多。