Javascript有许多内建的方法来产生对话框,如:window.alert(), window.confirm(),window.prompt().等。 然而IE提供更多的方法支持对话框。如:
showModalDialog() (IE 4+ 支持)
showModelessDialog() (IE 5+ 支持)
window.showModalDialog()方法用来创建一个显示HTML内容的模态对话框,由于是对话框,因此它并没有一般用window.open()打开的窗口的所有属性。
window.showModelessDialog()方法用来创建一个显示HTML内容的非模态对话框。
当我们用showModelessDialog()打开窗口时,不必用window.close()去关闭它,当以非模态方式[IE5]打开时, 打开对话框的窗口仍可以进行其他的操作,即对话框不总是最上面的焦点,当打开它的窗口URL改变时,它自动关闭。而模态[IE4]方式的对话框始终有焦点 (焦点不可移走,直到它关闭)。模态对话框和打开它的窗口相联系,因此我们打开另外的窗口时,他们的链接关系依然保存,并且隐藏在活动窗口的下面。
使用方法如下:
vReturnValue = window.showModalDialog(sURL [, vArguments] [, sFeatures])
vReturnValue = window.showModelessDialog(sURL [, vArguments] [, sFeatures])
参数说明:
sURL
必选参数,类型:字符串。用来指定对话框要显示的文档的URL。
vArguments
可选参数,类型:变体。用来向对话框传递参数。传递的参数类型不限,包括数组等。对话框通过window.dialogArguments来取得传递进来的参数。
sFeatures
可选参数,类型:字符串。用来描述对话框的外观等信息,可以使用以下的一个或几个,用分号“;”隔开。
dialogHeight 对话框高度,不小于100px,IE4中dialogHeight 和 dialogWidth 默认的单位是em,而IE5中是px,为方便其见,在定义modal方式的对话框时,用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。
还有几个属性是用在HTA中的,在一般的网页中一般不使用。
dialogHide:{ yes | no | 1 | 0 | on | off }:在打印或者打印预览时对话框是否隐藏。默认为no。
edge:{ sunken | raised }:指明对话框的边框样式。默认为raised。
unadorned:{ yes | no | 1 | 0 | on | off }:默认为no。
传入参数:
要想对话框传递参数,是通过vArguments来进行传递的。类型不限制,对于字符串类型,最大为4096个字符。也可以传递对象,例如:
test1.htm
<script>
var mxh1 = new Array("mxh","net_lover","孟子E章")
var mxh2 = window.open("about:blank","window_mxh")
// 向对话框传递数组
window.showModalDialog("test2.htm",mxh1)
// 向对话框传递window对象
window.showModalDialog("test3.htm",mxh2)
</script>
test2.htm
<script>
var a = window.dialogArguments
alert("您传递的参数为:" + a)
</script>
test3.htm
<script>
var a = window.dialogArguments
alert("您传递的参数为window对象,名称:" + a.name)
</script>
可以通过window.returnValue向打开对话框的窗口返回信息,当然也可以是对象。例如:
test4.htm
<script>
var a = window.showModalDialog("test5.htm")
for(i=0;i<a.length;i++) alert(a[i])
</script>
test5.htm
<script>
function sendTo()
{
var a=new Array("a","b")
window.returnValue = a
window.close()
}
</script>
<form>
<input value="返回" type=button onclick="sendTo()">
</form>
常见问题:
1,如何在模态对话框中进行提交而不新开窗口?
如果你 的 浏览器是IE5.5+,可以在对话框中使用带name属性的iframe,提交时可以制定target为该iframe的name。对于IE4+,你可以用高度为0的frame来作。例如:
test6.htm
<script>
window.showModalDialog("test7.htm")
</script> test7.htm
if(window.location.search) alert(window.location.search)
<frameset rows="0,*">
<frame src="about:blank">
<frame src="test8.htm">
</frameset> test8.htm
<form target="_self" method="get">
<input name=txt value="test">
<input type=submit>
</form>
<script>
if(window.location.search) alert(window.location.search)
</script>
2,可以通过http://servername/virtualdirname/test.htm?name=mxh方式直接向对话框传递参数吗?
答案是不能。但在frame里是可以的。
- 浏览: 1220993 次
- 性别:
- 来自: 广州
文章分类
- 全部博客 (883)
- Spring (101)
- Swing (1)
- Mysql (21)
- Js (59)
- Jsp (2)
- Hibernate (19)
- Myeclipse (5)
- SqlServer 2000 (2)
- poi (15)
- Java (70)
- SSH (12)
- Html (47)
- Fusion Charts (1)
- C\C++ (2)
- 汇编 (36)
- Jquery (37)
- Struts2 (6)
- Ubuntu (16)
- powerDesinger (4)
- Jboss (3)
- JAX-RS (13)
- JAXB (5)
- JAX-WS (11)
- JMS (4)
- WebSocket (8)
- PHP (16)
- Flash (1)
- maven (3)
- Oracle (8)
- HttpClient (6)
- sqlserver (19)
- svn (5)
- Tomcat (3)
- Jdbc (3)
- EsayUi (11)
- 微信公众平台 (19)
- IIS (2)
- Freemarker (11)
- Comet (1)
- Spring MVC (85)
- JBoss Seam (3)
- 二维码 (9)
- Spring Security (4)
- Ehcache (3)
- Apache Shiro (7)
- jackson (16)
- JPA (8)
- jcaptcha (2)
- RSA (2)
- Ajax (6)
- 跟我学Shiro (0)
- Spring4 (19)
- 跟我学spring3 (0)
- css (32)
- excel (4)
- Filter (3)
- 微信公众帐号开发教程 (0)
- Android (6)
- log4j (6)
- 淘宝接口 (17)
- 支付集成 (3)
- 单点登录 (3)
- Html5 (27)
- 移动平台前端 (3)
- Linux (44)
- FusionCharts (27)
- Json Jackson Xml (5)
- 方培工作室-微信开发 (0)
- Apache与Tomcat与IIS整合 (10)
- Nginx (17)
- webService (2)
- apache (4)
- lucene (3)
- lodop (2)
- Shiro (3)
- zTree (2)
- ireport (12)
- Servlet3.0 (5)
- 前端美工 (19)
- AngularJS (1)
- C#开发微信门户及应用 (0)
- Shell (3)
- bat脚本 (16)
- Bootstrap (26)
- Less (10)
- photoshop (6)
- Redis (6)
- Mongodb (10)
- MyBatis (3)
- 数据结构 (0)
- 读写分离-主从复制 (0)
- JFinal (0)
- 百度地图api (3)
- hadoop-hbase-hive-spark (3)
- WebStorm (2)
- Quartz (5)
- ios (0)
- Mina (8)
- Android Studio (4)
- Ratchet教程 (0)
- 移动端重构系列 (1)
- cubic-bezier贝塞尔曲线CSS3动画工具 (1)
- nginx+tomcat+memcached集群 (0)
- 集群 (0)
- ZooKeeper (3)
- Dubbo (0)
- vpn (0)
- kafka (0)
- JVM垃圾回收机制 (0)
- 微信小程序 (0)
- Lua (0)
- Hystrix (0)
- Vue.js (0)
- mycat (0)
- Openresty (0)
- springBoot (0)
- 新分类 (0)
- guava (0)
- 大数据 (0)
- Sentinel (0)
最新评论
-
JackMacing:
中文怎么解决?
SpringMVC与iReport(JasperReports) 5.6整合开发实例 -
18335864773:
用pageoffice把.可以实现在线的文档操作.直接转pdf ...
转:使用jasperreport动态生成pdf,excel,html -
linhao0907:
推荐一款轻量开源的支付宝组件:https://github.c ...
关于Alipay支付宝接口(Java版) -
songronghu:
太好了,非常有用,谢谢分享~
Java ConcurrentModificationException 异常分析与解决方案 -
wzwahl36:
http://www.atool.org/json2javab ...
Java下利用Jackson进行JSON解析和序列化
发表评论
-
Sublime 插件- px 转rem;Atom 编辑器插件: px2rem-plus
2018-09-07 16:18 0Sublime 插件- px 转rem htt ... -
前端工程师需要明白的「像素」
2018-09-07 09:58 0前端工程师需要明白的「像素」 https://www ... -
淘宝flexible.js漏洞修补
2018-09-06 18:17 0CSS像素、设备独立像素、设备像素之间关系 htt ... -
电脑端预览手机版页面
2018-05-30 23:23 5713QQ:433647 -
前端js和css的压缩合并之wro4j
2018-05-15 11:55 0http://fantaxy025025.iteye. ... -
flexible.js
2018-05-02 19:01 0http://yunkus.com/mobile-ad ... -
Flex 布局教程
2018-01-09 17:09 0http://www.ruanyifeng.com/ ... -
移动端弹出层加遮罩后禁止滑动
2018-01-08 18:57 0//实现滚动条无法滚动 var mo=functio ... -
易百教程
2017-06-07 14:00 0http://www.yiibai.com/lua/l ... -
已测试-幻灯滑动+滚动列表
2017-01-13 10:25 0<!DOCTYPE html> < ... -
iscroll4升级到iscroll5全攻略笔记 (博主已改行,不再更新)
2017-01-12 15:38 0http://blog.csdn.net/gcz ... -
IScroll5实现下拉刷新上拉加载更
2017-01-12 15:32 0http://blog.csdn.net/chenzh ... -
iscroll5 上下拉动刷新
2017-01-12 15:28 0http://www.cnblogs.com/mrxi ... -
html页面滚动到最底部时,无限滚动
2016-12-19 14:23 0<!DOCTYPE html> & ... -
原生JS实现addClass,removeClass,toggleClass
2016-12-08 18:45 0jQuery操作class的方式非常强大,但是目前还有 ... -
简约时尚的纯CSS3 Tabs选项卡特效
2016-12-05 11:17 0插件描述:这是一款使用纯CSS3制作的Ta ... -
JS组件系列——表格组件神器:bootstrap table
2016-11-30 11:54 0JS组件系列——表格组件神器:bootstra ... -
Bootstrap可编辑表格
2016-11-30 11:46 0http://blog.csdn.net/lzxad ... -
HTML5中的Range对象的研究
2016-11-24 18:34 0http://www.alixixi.com/web ... -
js createRange与createTextRange的一些用法实例
2016-11-24 13:39 0一、返回createTextRange的text和ht ...
相关推荐
### Window.ShowModalDialog 使用手册详解 #### 一、概述 `Window.ShowModalDialog` 是一个在 Internet Explorer 浏览器中特有的方法,用于创建模态对话框。此方法允许开发者在一个新的窗口中打开一个HTML页面,...
### JS弹出对话框 `window.showModalDialog()` 的使用与详解 #### 一、`window.showModalDialog()` 概述 在JavaScript中,`window.showModalDialog()` 是一个非标准但广泛使用的API,用于创建模态对话框。模态...
本文将重点介绍模态对话框的使用方法`window.showModalDialog()`。 模态对话框是一种阻止用户与网页其他部分互动,直到关闭对话框为止的交互方式。`window.showModalDialog()`是Internet Explorer 4及更高版本支持...
此外,还有一个类似的函数 `window.showModelessDialog`,该函数同样可以在 IE5.0 及以上版本中使用,但打开的是非模态对话框窗口。 #### 基本语法 ```javascript vReturnValue = window.showModalDialog(sURL, ...
### 使用Window.ShowModalDialog与Window.ShowModelessDialog在JavaScript中的详解 #### 一、引言 在Web开发中,为了实现更加丰富的用户交互体验,开发者经常需要创建模态或非模态对话框来显示特定的信息或者请求...
- 对于需要跨浏览器兼容的应用,推荐使用 `window.open`,并根据需求通过其他技术(如 CSS、JavaScript 库等)模拟模态对话框的行为。 总的来说,虽然 `ShowModalDialog` 在某些场景下提供了更强大的功能,但由于其...
`showModalDialog`是JavaScript `window`对象的一个方法,它用于打开一个新的模态对话框,与`window.open`相似但有所不同。主要的区别在于,当使用`showModalDialog`打开一个子窗口时,父窗口会失去焦点,用户无法与...
通过window.showModalDialog()创建的模态对话框具有父子窗口关系,当子对话框关闭时,父窗口才能继续进行操作。此外,对话框可以通过window.dialogArguments接收父窗口传递来的参数,并且可以通过window.returnValue...
当使用`window.showModalDialog()`函数打开模态对话框时,可以通过以下方式刷新父页面: - **语法**: `window.parent.dialogArguments.document.execCommand('Refresh');` - **示例**: ```javascript // 父页面...
在JSP开发中,`window.showDialog`是一个经常被用于创建模态对话框的方法,它可以帮助我们实现页面间的交互和数据传递。模态对话框是一种阻止用户与页面其他部分交互,直到用户处理完对话框中的内容才能继续操作的...
尽管`window.showModalDialog()`和`window.showModelessDialog()`为IE提供了一种创建模态和非模态对话框的简便方法,但考虑到IE的市场份额不断下降以及对现代Web标准的支持不足,开发者应考虑使用更广泛的跨浏览器...
**Window.showModalDialog 使用手册** `window.showModalDialog` 是Internet Explorer 4+ 版本开始支持的一个方法,用于创建一个模态对话框,显示HTML内容。模态对话框意味着用户必须关闭对话框才能继续与主窗口...
在JavaScript的世界里,`showModalDialog`是一个古老但仍然有用的函数,用于打开一个模态对话框,展示用户需要交互的信息。这个功能在处理用户输入、确认操作或展示详细信息时非常实用。本篇文章将深入探讨`...
showModalDialog参数详解 基本介绍: showModalDialog() (IE 4+ ...window.showModalDialog()方法用来创建一个显示HTML内容的模态对话框。 window.showModelessDialog()方法用来创建一个显示HTML内容的非模态对话框。
#### showModalDialog详解 `showModalDialog` 方法创建的是一个模态对话框,这意味着当这个对话框打开时,用户无法与主页面或其他非模态对话框进行交互,直到关闭当前对话框。这在需要用户做出决策或输入信息的情况...
### JS中的`showModalDialog`与`showModelessDialog`详解 #### 一、概述 在JavaScript中,`showModalDialog` 和 `showModelessDialog` 是两种用于创建弹出窗口的方法,主要用于显示HTML内容。这两种方法都是...
`window.showModalDialog()`是一个非常实用的函数,它用于打开一个模式对话框,该对话框阻止用户与主窗口交互,直到对话框关闭为止。其基本语法如下: ```javascript var returnValue = window.showModalDialog...
无论是使用`window.open()`还是模态/非模态对话框,都可以通过`window.opener`属性来引用打开当前窗口的窗口,从而实现子窗口与父窗口之间的数据传递和交互。例如,子窗口可以使用`window.opener.location.reload()`...