JavaScript - 模式窗口和非模式窗口

最新推荐文章于 2021-06-07 14:04:57 发布

袭冷

最新推荐文章于 2021-06-07 14:04:57 发布

阅读量1.3k

点赞数

分类专栏： JavaScript 文章标签： JavaScript showModelessDialog showModalDialog

本文链接：https://blog.youkuaiyun.com/guoxilen/article/details/22755875

版权

JavaScript 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了JavaScript中模式窗口和非模式窗口的使用方法，包括如何防止<form/>提交后打开新页面。详细讲解了showModelessDialog和showModalDialog函数的参数设置，如dialogHeight、dialogWidth、center等，以及各种属性如resizable、status和scroll的用法，帮助理解如何定制和控制对话框的显示效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、窗口创建
非模式窗口showModelessDialog：

用法：

function alertWindowForShowModelessDialog(){
     var childWindow = window.showModelessDialog(
          "dialogWindow.html",
          window,
         "dialogWidth:900px;dialogLeft:100px;Minimize=yes;Maximize=yes;");
}

模式窗口showModalDialog：
特性：
始终获得焦点，即时是最小化，直到关闭
用法：

function showWindowForShowModalDialog(){
     var childWindow = window.showModalDialog(
          "dialogWindow.html",
          window,
          "dialogHeight: 400px; dialogWidth: 900px; dialogTop: 100px;");
}

二、窗口交互
父窗口对话子窗口：
可通过创建时的句柄childWindow调用子窗口的方法，如：

childWindow.childAlert();

子窗口对话父窗口：
可通过创建时传入的window参数来调用父类窗口中的方法([]为子窗口层级决定)：

window.dialogArguments[.window.dialogArguments].parentAlert();

三、子窗口刷新

<input type="button" value="刷新"  id="reload_a" href=""></a>
          
<script type="text/javascript">
     function reload_self(){
          reload_a.href = "a.html" + "?random="+Math.random();
          reload_a.click();
     }
</script>

四、补充事项
防止<a/>点击后打开新页面的方法：在<head/>之间加入<base target="_self">

防止<form/>提交之后打开新页面的方法：
其一：
在<head/>之间加入<base target="_self">，若还不能，则在onsubmit中强制本页面提交：

function onsubmit(){
     document.Form1.target="_self";
}

其二：

<script type="text/javascript">
      window.name = "curWindow";
</script>

<form name="myForm" id="myForm" action="" method="post" target="curWindow">

注意：在普通页面打开非模式窗口，非模式窗口再打开模式窗口时，不可以调用普通页面的方法，会卡死(仅测试IE9)

五、参数说明
dialogHeight :对话框高度，不小于100px，ＩＥ４中默认的单位是em，而IE5中是px
dialogWidth: 对话框宽度
dialogLeft: 离屏幕左的距离
dialogTop: 离屏幕上的距离
center: {yes | no | 1 | 0 }：窗口是否居中，默认yes，但仍可以指定高度和宽度
help: {yes | no | 1 | 0 }：是否显示帮助按钮，默认yes
resizable: {yes | no | 1 | 0 } ［IE5+］：是否可被改变大小。默认no
status: {yes | no | 1 | 0 } ［IE5+］：是否显示状态栏。默认为yes[ Modeless]或no[Modal]
scroll:{ yes | no | 1 | 0 | on | off }：指明对话框是否显示滚动条。默认为yes
dialogHide:{ yes | no | 1 | 0 | on | off }：在打印或者预览时对话框是否隐藏。默认为no
edge:{ sunken | raised }：指明对话框的边框样式。默认为raised
unadorned:{ yes | no | 1 | 0 | on | off }：默认为no
minimize:{ yes | no}：指定对话框是否显示最小化按钮,默认不显示
maximize:{ yes | no}：指定对话框是否显示最大化按钮,默认不显示