showModalDialog模态对话框的运用详解以及浏览器兼容

发布时间：2023-09-18 14:55:01 所属栏目：教程来源：

导读：showModalDialog模态对话框的使用详解以及浏览器兼容

1.ModalDialog是什么？

showModalDialog是jswindow对象的一个方法，和window.open一样都是打开一个新的页面。

区别是：showModalDialog打开子窗口后

showModalDialog模态对话框的使用详解以及浏览器兼容

1.ModalDialog是什么？

showModalDialog是jswindow对象的一个方法，和window.open一样都是打开一个新的页面。

区别是：showModalDialog打开子窗口后，父窗口就不能获取焦点了（也就是无法操作了）。

可以在子窗口中通过设置window.returnValue的值，让父窗口可以获取这个returnvalue.

2.一个例子

1)主窗口main.html,

2)在主窗口中通过showModalDialog的方式打开子窗口sub.html

3)在子窗口中设置returnValue返回给主窗口使用

main.html

代码如下:

<HTML>

<HEAD>

<METANAME="GENERATOR"Content="oscar999">

</HEAD>

<script>

functionshowmodal()

{

varret=window.showModalDialog("sub.html?temp="+Math.random());

alert("subreturnvalueis"+ret);

}

</script>

<BODY>

<INPUTid=button1type=buttonvalue="opensub"name=button1onclick="showmodal();">

</BODY>

</HTML>

sub.html

代码如下:

<HTML>

<HEAD>

<METANAME="GENERATOR"Content="oscar999">

</HEAD>

<script>

functionreturnMain()

{

window.returnValue="returnfromsub";

window.close();

}

</script>

<BODY>

<INPUTid=button1type=buttonvalue="returnandclose"name=button1onclick="returnMain()">

</BODY>

</HTML>

特别说明：在main.html中showModalDialog的方法时，有使用到Math.random()的目的是避免缓存。

3.showModalDialog详细使用

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

sURL

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

vArguments

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

sFeatures

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

dialogHeight对话框高度，不小于100px，ＩＥ４中dialogHeight和dialogWidth默认的单位是em，而ＩＥ５中是px，为方便其见，在定义modal方式的对话框时，用px做单位。

dialogWidth:对话框宽度。

dialogLeft:距离桌面左的距离。

dialogTop:离桌面上的距离。

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

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

resizable:{yes|no|1|0}［ＩＥ５＋］：是否可被改变大小。默认no。

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

scroll:{yes|no|1|0|on|off}：指明对话框是否显示滚动条。默认为yes。

还有几个属性是用在HTA中的，在一般的网页中一般不使用。

dialogHide:{yes|no|1|0|on|off}：在打印或者打印预览时对话框是否隐藏。默认为no。

edge:{sunken|raised}：指明对话框的边框样式。默认为raised。

（编辑：聊城站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!