模态窗口

合集下载

相关主题

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

模态窗口的打开,model window open
2.模态窗口的关闭,model window close
3.模态窗口的传递参数,model window get valuse
4.其他....,other ..
1.window.showModalDialog("DialogPage.aspx","newwin","dialogHeight: 200px; dialogWidth: 150px; dialogTop: 458px; dialogLeft: 166px; edge: Raised; center: Yes; help: Yes; resizable: Yes; status: Yes;");
2.window.close();
3.传值
ParentPage.aspx:
window.showModalDialog("DialogPage.aspx?para1=aaa&para2=bbb"); DialogPage.aspx:
string str1=Request.QueryString["para1"].toString();
string str2=Request.QueryString["para2"].toString();
返回值
DialogPage.aspx:
window.returnValue="aaa";
ParentPage.aspx:
var str=window.showModalDialog("DialogPage.aspx");
4.
aspx页面在showmodeldialog情况下为什么一提交就重新打开一个页面? showmodaldialog打开的页面中在<head></head>之间加入一行：<base
target="_self">
浅析js中的showModalDialog的实战应用
IE提供的showModalDialog()方法是一个很好用的Web应用功能，虽然一般的网站应用
不是很常见，但一旦涉及到企业应用级的Web开发则就很有用了。

现在我用一个简单易懂的例子来说明一下：
这一应用需要两个web文件：
1、父窗口（也即用来控制弹出窗口的那个页面）
showModalDialog.html
--------------------------------------------------------------------------------------- <html>
<head>
<title>showModalDialog</title>
<script language="JavaScript">

</script>
</head>
<body>
<h3><a href="#" onclick="showDialog()">打开Dialog窗口</a></h3> <div id="info"></div>
</body>
</html>
2、子窗口（即将被弹出的那个页面）
dialog.html
-----------------------------------------------------------------------------------------
<html>
<head>
<title>Dialog</title>
</head>
<body>
<script language="JavaScript">
<!--
//获取父窗口传来的对象（本例中就是父页面中的“oInfo”数组对象，也可用“window”对象，以便对父页面进行操作。

总之，只要是object类型就成。

）
var args = window.dialogArguments;
if(args!=null){
//document.write(args);
for(var i=0;i<args.length;i++){
document.writeln(args[i]+" "+(i+1)*10);
}
}else{
document.writeln("对不起，参数为空");
}
//向父窗口返回的值
window.returnValue = "这是子窗口返回来的值";
//-->
</script>
</body>
</html>
--------------------------------------------------------------------
好了，运行showModalDialog.html即可看出其中的端倪来了。

通过这些工作，我实现了将值在父页面和子页面中的相互传递和处理。

我想这也正是ms 设计showModalDialog()方法的初衷之所在吧。

当然，这个例子太简单了。

但我的目的只是通过它了解showModalDialog的执行机制。

实际应用中需要举一反三才行呢。

（完）
Trackback: /TrackBack.aspx?PostId=488153
/ll_feng/archive/2005/09/23/488153.aspx
【9、终极应用--弹出的窗口之Cookie控制】回想一下，上面的弹出窗口虽然酷，但是有一点小毛病(沉浸在喜悦之中，一定没有发现？)比如你将上面的脚本放在一
个需要频繁经过的页面里(例如首页)，那么每次刷新这个页面，窗口都会弹出一次，
是不是非常烦人？:-(有解决的办法吗？当然有！我们使用cookie来控制一下就可
以了。

首先，将如下代码加入主页面HTML的〈HEAD〉区：〈script〉
function
openwin(){window.open("page.html","","width=200,height=200")} function get_cookie(Name) {var search = Name + "="var returnvalue = "";
if (document.cookie.length 〉0) {offset =
document.cookie.indexOf(search)
if (offset != -1) {offset += search.length end =
document.cookie.indexOf(";", offset);
if (end == -1)end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))}}
return returnvalue;}function loadpopup(){
if (get_cookie(′popped′)==′′){openwin()
document.cookie="popped=yes"}}
〈/script〉
然后，用〈body onload="loadpopup()"〉
（注意不是openwin而是loadpop啊！）
替换主页面中原有的〈BODY〉这一句即可。

你可以试着刷新一下这个页面或重新进入该页面，
窗口再也不会弹出了。

真正的Pop-Only-Once！
写到这里弹出窗口的制作和应用技巧基本上算是完成了，
俺也累坏了，一口气说了这么多，
希望对正在制作网页的朋友有所帮助俺就非常欣慰了。

需要注意的是，JS脚本中的的大小写最好前后保持一致
JS:window.showModalDialog和window.returnValue的应用
fireForm.htm:点击“上传”按钮弹出内部窗口(showModalDialog),代码如下:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>无标题文档</title>
<script language="javascript">
function onObjMore(url,name,height,width,formName) {
//window.alert(formName.file.type);
var feature =
"dialogWidth:"+width+"px;dialogHeight:"+height+"px;scroll:yes;status:no;h elp:no;center:1";
var returnTarget = window.showModalDialog(url, name, feature);
if(returnTarget != undefined && returnTarget.length > 1) {
//document.location = returnTarget;
formName.file.value=returnTarget;
}
return false;
}
</script>
<link href="css/aljoin.css" rel="stylesheet" type="text/css">
</head>
<body>
<form name="proForm" method="post" action="">
<table width="400" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="93" height="25" style="white-space:nowrap " nowrap>文件</td>
<td width="307" height="25"><input name="file" type="text"
id="file"></td>
</tr>
<tr>
<td height="25"> </td>
<td height="25"><input type="button" name="Submit" value="上传文件" onClick="onObjMore('upfile.htm','upfile',300,300,proForm)"></td> </tr>
</table>
</form>
</body>
</html>
upfile.htm:点击”关闭”按钮返回window.returnValue值给opener,代码如下:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>无标题文档</title>
<script language="javascript">
function exit() {
window.returnValue = "images/upload/2004080512.jpg";
window.close();
}
</script>
</head>
<body>
<input name="" type="button" value="关闭窗口" onClick="exit()">
</body>
</html>
showModalDialog() (IE 4+ 支持)
showModelessDialog() (IE 5+ 支持)
window.showModalDialog()方法用来创建一个显示HTML内容的模态对话框。

window.showModelessDialog()方法用来创建一个显示HTML内容的非模态对话框。

使用方法：
vReturnValue = window.showModalDialog(sURL [, vArguments] [,sFeatures]) vReturnValue = window.showModelessDialog(sURL [, vArguments]
[,sFeatures])
参数说明：
sURL--
必选参数，类型：字符串。

用来指定对话框要显示的文档的URL。

vArguments--
可选参数，类型：变体。

用来向对话框传递参数。

传递的参数类型不限，包括数组等。

对话框通过window.dialogArguments来取得传递进来的参数。

sFeatures--
可选参数，类型：字符串。

用来描述对话框的外观等信息，可以使用以下的一个或几个，用分号“;”隔开。

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

2.dialogWidth: 对话框宽度。

3.dialogLeft: 离屏幕左的距离。

4.dialogTop: 离屏幕上的距离。

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

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

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

默认no。

8.status: {yes | no | 1 | 0 } ［IE5+］：是否显示状态栏。

默认为yes[ Modeless]或no[Modal]。

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

默认为yes。

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

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

默认为no。

11.edge:{ sunken | raised }：指明对话框的边框样式。

默认为raised。

12.unadorned:{ yes | no | 1 | 0 | on | off }：默认为no。

参数传递：
1.要想对话框传递参数，是通过vArguments来进行传递的。

类型不限制，对于字符串类型，最大为4096个字符。

也可以传递对象，例如：
-------------------------------
parent.htm
<script>
var obj = new Object();
="51js";
window.showModalDialog("modal.htm",obj,"dialogWidth=200px;dialogHeight =100px");
</script>
modal.htm
<script>
var obj = window.dialogArguments
alert("您传递的参数为：" + )
</script>
-------------------------------
2.可以通过window.returnValue向打开对话框的窗口返回信息，当然也可以是对象。

例如：
------------------------------
parent.htm
<script>
str
=window.showModalDialog("modal.htm",,"dialogWidth=200px;dialogHeight= 100px");
alert(str);
</script>
modal.htm
<script>
window.returnValue="";
</script>
现在用2.0，要实现一个功能：a页面点击一个按钮，弹出一个窗口，选择数据，然后数据返回到a页面的某个textbox里面。

以前我用
if(!IsClientScriptBlockRegistered("clientScript2"))
{
string strScript2= "<script>function OpenWin2(){var
str=window.showModalDialog('user.aspx',document.Form1.sx.value,'dialogWi
dth:455px; dialogHeight:450px;');document.Form1.sx.value=str}</script>";
RegisterClientScriptBlock("clientScript2", strScript2);
}
nw.Attributes.Add("onclick", "OpenWin()");
这样去做，不知道还有其他更好的方法吗？
用window.open也可以，在弹出窗口中调用父窗口的js函数,实现传
值:opener.someFunction("someValue");
模式窗口showModalDialog的用法总结
最近几天一直在处理模式窗口的问题，索性写了这篇总结，以供参考：
1。

打开窗口：
var handle = window.showModalDialog(url, objects, feathers);
其中：objects可以为参数（包括数组），也可以是对象。

通常的用法objects = {window} ，把父窗体的对象共享给子窗体。

2。

关闭子窗口：
window.close();
3。

从子窗体传参数给父窗体：
window.returnVal = string;
3。

清除缓存，防止模式窗口页面不更新的情况：
HTML
<META HTTP-EQUIV="pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache,
must-revalidate">
<META HTTP-EQUIV="expires" CONTENT="Mon, 23 Jan 1978 20:52:30 GMT"> ASP
<%
Response.Expires = -1
Response.ExpiresAbsolute = Now() - 1
Response.cachecontrol = "no-cache"
%>
PHP
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
header("Cache-Control: no-cache, must-revalidate");
header("Pragma: no-cache");
JSP
response.setHeader("Pragma","No-Cache");
response.setHeader("Cache-Control","No-Cache");
response.setDateHeader("Expires", 0);
4。

防止打开新窗口（如提交表单）：
<base target="_self">
5。

在模式窗口使用F5刷新页面：
<base target="_self">
<body onkeydown="if (event.keyCode==116){reload.click()}">
<a id="reload" href="filename.htm" style="display:none">reload...</a>
其中：filename为窗口页面。

6。

防止模式窗口打开的页面出现cookie丢失的情况：
模式窗口打开新窗口时，仅可以使用showModalDialog(url,window,feathers); 方法，且objects 为window 。

7。

在弹出窗口中获得或设置主窗口的任何值：
打开弹出窗口时用：showModalDialog(url, window, feathers)
在弹出窗口中使用window.dialogArguments 对象（即主窗口传递过来的window 对象集），即可以获得或者设置主窗口的值
[js]如何得到showModalDialog的opener？
用window.open可以在弹出的窗口里得到window.opener，但是用多模的窗口却得不到这个window.opener，有什么办法在多模的窗口里得到父页面对象？
用parent或者top,看你层次结构了
父对象dialogArguments
parent，top，dialogArguments都不行，都是说找不到对象，不知道是不是我的方法用得不对。

我的页面结构：
a页面弹出b页面，b页面操作完把数据返回给a页面。

b页面的JS：
[code]
if(parent){ //if(top),if(window.dialogArguments)这些写法都报错。

.........
}
[/code]
用window.open的话，我用以下代码正常运行。

[code]
if(window.opener){
........
}
[/code]
showModalDialog没有opener,因为showModalDialog就好像alert一样，弹出的是模式对话框，这时候父窗口不可用
showModelessDialog可以用opener访问父窗口的，如果你试了还是不能那么[code]
win=showModelessDialog()
win.opener=top
[/code]
，然后在无模式对话框中setTimeout一下再去访问opener即可
俺以前用过的，这种方法肯定可行
ft，一步一步找对象，终于找到了window.dialogArguments这个对象了。

window.dialogArguments取到的是showModalDialog时的第二个参数值，这个值是什么（类型），dialogArguments就是什么（类型），先前一直用字符串，并非对象，所以一直报找不到对象的错误，将父页面对象传到该参数里，现在正常获取并操作了。

谢谢各位。

hutia在上个帖子中说
呵呵，不能采用无模式窗口，因为我弹出窗口之后父页面的操作是不允许的，不过还是谢谢你告诉我这个方法。

另外我有一个问题就是，你第二句的win.opener = top是什么意思？这是一个等式还是一个赋值操作？
这也是老早前整理的了，也贴出来吧：
1．showModalDialog和showModelessDialog的异同
同：两者弹出的窗体不能刷新
异：前者是模态窗口，始终获得焦点；后者是非模态窗口，只不过弹出一个页面，还可以操作父窗口。

2．关闭showModalDialog和showModelessDialog弹出的窗口
<INPUT type="button" value="ButtonClick" onclick="self.close();">
3．怎样才让在showModalDialog和showModelessDialog的弹出新窗口里操作button,不弹出新窗口？
在<head>和</head>之间加<base target="_self">
4. showModalDialog的返回值
参照例子：
t1.html:
<script language="javascript">
function showpage()
{
alert(showModalDialog("t2.html"));
}
</script>
<input type="button" value="getval" onClick="showpage();"> t2.html
<HTML>
<HEAD>
<Script language="javascript">
<
function SetVal()
{
returnValue="abc";
close();
}
//-->
</Script>
</HEAD>
<BODY>
<input type="button" value="Btn1" onClick="SetVal();">
</BODY>
</HTML>
是用
windwo.open('./a.aspx?str='+type,'window','height=……');
子窗口返回值：
window.opener.document.all.a.value=document.all.b.value;格式
能帮忙解决为盼！
现在越来越多的浏览器会屏蔽掉window.open() 这个让程序员大为头痛。

有办法解决吗？看看这个文章或许对你有帮助！
showModalDialog()、showModelessDialog()方法使用详解
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］打开时，打开对话框的窗口仍可以进行其他的操作，即对话框不总是最上面的焦点，当打开它的窗口ＵＲＬ改变时，它自动关闭。

而模态［ＩＥ４］方式的对话框始终有焦点（焦点不可移走，直到它关闭）。

模态对话框和打开它的窗口相联系，因此我们打开另外的窗口时，他们的链接关系依然保存，并且隐藏在活动窗口的下面。

使用方法如下：
vReturnValue = window.showModalDialog(sURL [, vArguments] [, sFeatures])
vReturnValue = window.showModelessDialog(sURL [, vArguments] [, sFeatures])
参数说明：
sURL
必选参数，类型：字符串。

用来指定对话框要显示的文档的URL。

vArguments
可选参数，类型：变体。

用来向对话框传递参数。

传递的参数类型不限，包括数组等。

对话框通过window.dialogArguments来取得传递进来的参数。

sFeatures
可选参数，类型：字符串。

用来描述对话框的外观等信息，可以使用以下的一个或几个，用分号“;”隔开。

dialogHeight 对话框高度，不小于１００px，ＩＥ４中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。

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对象，名称：" )
</script>
可以通过window.returnValue向打开对话框的窗口返回信息，当然也可以是对象。

例如：
===================
<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>
<body>
<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里是可以的。

/Article-107-11846.shtml
js模式对话框实现用户登录
关键字: 企业应用js showModalDialog
以前看过别人写的用js的showModalDialog做用户登录今天闲着没事做了一下感觉不错
采用ModalDialog做登录，最大优点就是省去了传递url的麻烦
下面列出关键代码当作备忘吧
父窗口代码：window.showModalDialog('login.jsp', window);//这个window作为参数传递到子窗口，当登录成功后可通过这个对象刷新父窗口
子窗口代码：
window.dialogArguments.document.location.reload();//刷新父窗口
window.close(); //关闭自己
还有一个关键代码：
<base target="_self">
如果不加这段代码，在登录返回之后会打开一个新窗口
我99的兼容IE,FF ,Opera
var win=new MdiWindow(/*width*/ 300 ,/*height*/ 200 , /*left*/ 1 , /*top*/ 100, /*下方不可操作*/ true);
win.setSize(300,200);//设置大小
win.setWindowArguments({window:window});
//或win.setWindowArguments(window)
win.load("login.html");
win.frame.location.reload();//刷新
win.onClose=function(){
//闭时回调函数
}
win.close();//关闭
//子窗口代码：
parent.initWindowArguments(window);
window.close();//关闭自己
var opener=windowArguments.window;
opener.reload();//刷新父页面
windowHandler.btnClose.hide();//隐藏关闭按钮。

js中showModalDialog()问题！会的来帮帮忙，谢谢！楼主lcwlyl（网络幽灵）2005-10-27 12:13:30 在Java / Web 开发提问
我在网页上用showModalDialog()弹出一个网页对话框(a)，里面是jsp内容，然后再在弹出的对话框(a)中，再弹出一个网页对话框（b），我把(b)关掉后，(a)里面的内容怎么刷新。

想了好久，没有解决办法，请各位帮一下忙。

问题点数：50、回复次数：10
Top
1 楼lcwlyl（网络幽灵）回复于2005-10-27 12:17:05 得分0 如果在对话框（a）的基础上，再用confirm()方法弹出对话框(c)，再经过处理，倒是可以刷新(a)。

但(b)要处理的时候，必须先关掉窗口，但是用"window.close()"后，下面的处理代码就不会执行了。

Top
2 楼Croatia（Croatia）回复于2005-10-27 12:47:44 得分0 你打开窗口的时候，比如说，window.open，这个函数的返回值就是那个新窗口的句柄。

通过它，你可以刷新那个新的窗口。

Top
3 楼lcwlyl（网络幽灵）回复于2005-10-27 13:16:28 得分0 但（a)和(b)都是对话框啊，是用showModalDialog()方法打开的。

即使有返回值，但再怎么操作呢？
Top
4 楼lcwlyl（网络幽灵）回复于2005-10-27 13:18:36 得分0 如果关掉(a)的话，因为它的上级是一个jsp页面，倒是可以自动刷新，相当于用了alert()。

Top
5 楼jianggl88（亮）回复于2005-10-27 15:02:04 得分5你说得很乱哪! 刷新在html <head> 里面加<base target="_self"> 就会在本页面刷新了
Top
6 楼liu_you（滴水藏海）回复于2005-10-2
7 16:18:03 得分5在b中定义一些变量;vars
在c中window.close()前为b中变量赋值:parent.vars.value=...
以及调用parent.refresh()类似的function.
Top
7 楼Croatia（Croatia）回复于2005-10-27 16:25:25 得分35例子：
test3.html
<html>
<head>
<script>
function newwin(){
window.showModalDialog("test4.html")
}
</script>
</head>
<body>
<body>
<form>
<input value="Open3" type=button onclick="newwin()"> </form>
</body>
</html>
test4.html
<html>
<head>
<script>
function newn(){
var s = window.showModalDialog("test5.html")
alert(s);
if (s = "1"){
reload();
}
}
function reload(){
window.location.reload(true);
}
</script>
</head>
<body>
<body>
Form4
<form name="frm4">
<input value="new4" type=button onclick="newn()"> <input value="test4" type=text value="test">
</form>
<script>
alert(1);
</script>
</body>
</html>
test5.html
<html>
<head>
<script>
function bak(){
window.returnValue = '1'
window.close()
}
</script>
</head>
<body>
<body>
<form>
<input value="back5" type=button onclick="bak()">
</form>
</body>
</html>
打开test3.html就可以看到了。

Top
8 楼liutang2（Believe I Can Fly！）回复于2005-10-27 16:38:48 得分5父页面中的函数
function add(){
var flag=showModalDialog("ForOutpersonlist.do?act=preAdd&ID="+PID );
if(flag=='okLoad'){
winReload();
}
}
子页面中的函数
function saveThis(){ form1.submit();
returnValue='okLoad';
window.close();
}。