模态窗口及传值过程 .

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

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

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

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


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

共有三个参数,

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

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

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

1.dialogHeight :对话框高度,不小于100px,IE4中dialogHeight 和 dialogWidth 默认的单位是em,而IE5中是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 } [IE5+]:是否可被改变大小。默认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 仿模态窗口,效果要好的多。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值