浅谈JavaScript窗体Window.ShowModalDialog使用


Posted in Javascript onJuly 22, 2020

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>
</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里是可以的

到此这篇关于浅谈JavaScript窗体Window.ShowModalDialog使用的文章就介绍到这了,更多相关JavaScript窗体Window.ShowModalDialog内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
jQuery学习5 jQuery事件模型
Feb 07 Javascript
js导出table数据到excel即导出为EXCEL文档的方法
Oct 10 Javascript
JSONP跨域的原理解析及其实现介绍
Mar 22 Javascript
在JavaScript的jQuery库中操作AJAX的方法讲解
Aug 15 Javascript
JS实现的网页背景闪电闪烁效果代码
Oct 17 Javascript
mui框架 页面无法滚动的解决方法(推荐)
Jan 25 Javascript
Vue.js 表单控件操作小结
Mar 29 Javascript
10分钟上手vue-cli 3.0 入门介绍
Apr 04 Javascript
JavaScript解析机制与闭包原理实例详解
Mar 08 Javascript
bootstrap table实现横向合并与纵向合并
Jul 18 Javascript
微信小程序实现收货地址左滑删除
Nov 18 Javascript
用vue设计一个日历表
Dec 03 Vue.js
解决vue里a标签值解析变量,跳转页面,前面加默认域名端口的问题
Jul 22 #Javascript
vue props 一次传多个值实例
Jul 22 #Javascript
微信小程序动态评分展示/五角星展示/半颗星展示/自定义长度展示功能的实现
Jul 22 #Javascript
详谈vue中router-link和传统a链接的区别
Jul 22 #Javascript
解决Vue router-link绑定事件不生效的问题
Jul 22 #Javascript
vue tab滚动到一定高度,固定在顶部,点击tab切换不同的内容操作
Jul 22 #Javascript
vue页面跳转实现页面缓存操作
Jul 22 #Javascript
You might like
深入了解php4(2)--重访过去
2006/10/09 PHP
用php的ob_start来生成静态页面的方法分析
2011/03/09 PHP
php的chr和ord函数实现字符加减乘除运算实现代码
2011/12/05 PHP
php常用表单验证类用法实例
2015/06/18 PHP
Laravel框架实现多个视图共享相同数据的方法详解
2019/07/09 PHP
javascript 简单高效判断数据类型 系列函数 By shawl.qiu
2007/03/06 Javascript
jQuery Div中加载其他页面的实现代码
2009/02/27 Javascript
基于jQuery的history历史记录插件
2010/12/11 Javascript
基于JQuery的类似新浪微博展示信息效果的代码
2012/07/23 Javascript
JavaScript改变HTML元素的样式改变CSS及元素属性
2013/11/12 Javascript
JavaScript简单实现鼠标拖动选择功能
2014/03/06 Javascript
Javascript 浮点运算精度问题分析与解决
2014/03/26 Javascript
NodeJS实现视频转码的示例代码
2017/11/18 NodeJs
vue百度地图 + 定位的详解
2019/05/13 Javascript
微信小程序开发实现的选项卡(窗口顶部/底部TabBar)页面切换功能图文详解
2019/05/14 Javascript
vue中引入mxGraph的步骤详解
2019/05/17 Javascript
React实现类似淘宝tab居中切换效果的示例代码
2020/06/02 Javascript
vue+elementUI(el-upload)图片压缩,默认同比例压缩操作
2020/08/10 Javascript
python计算文本文件行数的方法
2015/07/06 Python
Python实现统计代码行的方法分析
2017/07/12 Python
详解python 拆包可迭代数据如tuple, list
2017/12/29 Python
Python3 利用face_recognition实现人脸识别的方法
2020/03/13 Python
html5 offlline 缓存使用示例
2013/06/24 HTML / CSS
详解如何在登录过期后跳出Ifram框架
2020/09/10 HTML / CSS
印度网上购物首选目的地:Flipkart
2016/08/01 全球购物
Original Penguin英国官方网站:美国著名休闲时装品牌
2016/10/30 全球购物
车间调度岗位职责
2013/11/30 职场文书
自立自强的名人事例
2014/02/10 职场文书
3分钟英语演讲稿
2014/04/29 职场文书
2014年个人债务授权委托书范本
2014/09/22 职场文书
某集团股份有限公司委托书样本
2014/09/24 职场文书
合伙开公司协议书范本
2014/10/28 职场文书
写给老师的感谢信
2015/01/20 职场文书
vue-cli3.0修改打包后的文件名和文件地址,打包后本地运行报错解决
2022/04/06 Vue.js
Consul在linux环境的集群部署
2022/04/08 Servers
MySQL 数据库范式化设计理论
2022/04/22 MySQL