浅谈JavaScript窗体Window.ShowModalDialog使用

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内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

时间: 2020-07-19

JavaScript 弹出子窗体并返回结果到父窗体的实现代码

思路:用window.showModalDialog方法获取到弹出子窗体的引用,再在子页面用window.returnValue="***"来返回结果. 示例代码:(用jQuery简化实现) 父页面:parent.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional

javascript 实现子父窗体互相传值的简单实例

window.showModalDialog() 使用方法: var returnValue = window.showModalDialog(url [, arguments] [,features]); url  -- 必选参数,类型:字符串,用来指定对话框要显示的文档的URL arguments  -- 可选参数,类型:变体,用来向对话框传递参数,传递的参数类型不限,包括数组等,对话框通过window.dialogArguments来取得传递进来的参数 features   -- 可选参数

JavaScript实现弹出模态窗体并接受传值的方法

本文实例讲述了JavaScript实现弹出模态窗体并接受传值的方法.分享给大家供大家参考,具体如下: function shows(zwbh){ var sUrl=window.showModalDialog('zlzx_edit.asp?xmbid=<%=Request("xmbid")%>&zlbh='+zwbh+'&typeid=<%=typeid%>','window','dialogWidth=500px;dialogHeight=24

JavaScript添加随滚动条滚动窗体的方法

本文实例讲述了JavaScript中添加随滚动条滚动窗体的方法.分享给大家供大家参考,具体如下: 两种实现方式: 第一种: <script type=/"text/javascript/"> function scrollImg(){ var posX,posY; if (window.innerHeight) { posX = window.pageXOffset; posY = window.pageYOffset; } else if (document.docume

JavaScript父子窗体间的调用方法

本文实例讲述了JavaScript父子窗体间的调用方法.分享给大家供大家参考.具体如下: 如果要打开一个新窗口,使用 window.open( ) 方法. 如果要关闭自身窗口,使用 window.close( ) 方法. 一.父窗体 为了便于父窗口操作子窗口,可以为 window.open( ) 方法定义一个变量,例如: var opW = window.open("tests.html","popup","width=300,height=300&quo

Ext JS动态加载JavaScript创建窗体的方法

JavaScript不需要编译即可运行,这让JavaScript构建的应用程序可以变得很灵活.我们可以根据需要动态从服务器加载JavaScript脚本来创建和控制UI来与用户交互.下面结合Ext JS来说明如何从服务器上动态加载JS脚本来动态创建窗体.  1 项目结构:  项目结构如下:其中GetJSUI一般处理程序用来从数据库表中抓取UI配置,并返回到客户端:Contents文件夹下用HTML文件和JS库等. 2 数据库表结构 可以用下面的SQL在MSSQL中创建表,其中JavaScriptC

js showModalDialog 弹出对话框的简单实例(子窗体)

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="showdialog_dialog.aspx.cs" Inherits="WSHelpDoc_showdialog_dialog" %> 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&quo

JavaScript鼠标事件,点击鼠标右键,弹出div的简单实例

JavaScript鼠标事件,点击鼠标右键,弹出div的简单实例 document.oncontextmenu = function(){return false}; //禁止鼠标右键菜单显示 var res = document.getElementById('box'); //找到id为box的div document.body.onmouseup = function(e){ //在body里点击触发事件 if(e.button===2){ //如果button=1(鼠标左键),butto

jQuery点击自身以外地方关闭弹出层的简单实例

主要功能是点击显示,然后通过点击页面的任意位置都能关闭显示效果,主要是$(document).click的作用 开发过程中经常有一些弹出层,弹出后要在点击页面其他地方时自动关闭,下面是实现代码: HTML代码: 复制代码 代码如下: <div class="down">click</div><div class="con hide">show-area</div> CSS代码:.hide{display:none;}

js showModalDialog弹出窗口实例详解

showModalDialog:模式窗口, 一种很特别的窗口,当它打开时,后面的父窗口的活动会停止,除非当前的模式子窗口关闭了, 才能操作父窗口.在做网页Ajax开发时,我们应该有时会用到它来实现表单的填写, 或做类似网上答题的窗口. 它的特点是,传参很方便也很强大,可直接调用父窗口的变量和方法. 使用方法:  vReturnValue = window.showModalDialog(sURL [, vArguments] [,sFeatures]) 参数说明:  sURL--  必选参数,类

js弹出对话框方式小结

本文实例总结了js弹出对话框方式.分享给大家供大家参考,具体如下: 一般常用的是 alert prompt confirm三种对话框 示例1: <html> <head> <title>Example 简单对话框</title> </head> <body> <script type="text/JavaScript"> <!-- alert("Good Morning!");

js中常用的弹出对话框3种方式

1:只是提醒,不能对脚本产生任何改变: 2:一般用于确认,返回 true 或者 false ,所以可以轻松用于 if...else...判断 3:一个带输入的对话框,可以返回用户填入的字符串,常见于某些留言本或者论坛输入内容那里的插入UBB格式图片 下面我们分别演示: 三种弹出对话框的用法实例 function ale() {//这个基本没有什么说的,就是弹出一个提醒的对话框 alert("我敢保证,你现在用的是演示一"); } function firm() {//利用对话框返回的值

js 弹出对话框(遮罩)透明,可拖动的简单实例

js 弹出对话框(遮罩)透明,可拖动的简单实例 <html> <head> <script> function sAlert(txt) { //var eSrc=(document.all)?window.event.srcElement:arguments[1]; var shield = document.createElement("DIV"); shield.id = "shield"; shield.style.posi

九种js弹出对话框的方法总结

[1.最基本的js弹出对话框窗口代码] 这是最基本的js弹出对话框,其实代码就几句非常简单: 复制代码 代码如下: <script LANGUAGE="javascript"> <!-- window.open ("page.html") --> </script> 因为这是一段javascripts代码,所以它们应该放在<script LANGUAGE="javascript">标签和</s

JS弹出对话框实现方法(三种方式)

本文实例讲述了JS弹出对话框实现方法.分享给大家供大家参考,具体如下: 1.警告框 <html> <head> <script type="text/javascript"> function disp_alert() { alert("我是警告框!!") } </script> </head> <body> <input type="button" onclick=&

JS实现弹出下载对话框及常见文件类型的下载

1.写在前面 JS要实现下载功能,一般都是这么几个过程:生成下载的URL,动态创建一个A标签,并将其href指向生成的URL,然后触发A标签的单击事件,这样就会弹出下载对话框,从而实现了一个下载的功能. 这里所说的下载,有时候也可以理解为保存.出于安全考虑,JS肯定无法直接调用FileAPI写文件到磁盘,但是却可以通过下载来变相实现保存功能. 2.几个备用知识点 2.1. JS触发单击事件 既然是用A标签模拟,那么肯定要知道JS如何主动触发单击事件. 最简单的触发单击事件肯定是elem.clic