来个模态kuang_关于模态窗口(showModalDialog)的专题【收藏】

转自:http://www.cnblogs.com/donnet/articles/1039509.html

1.模态窗口的打开,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打开的页面中在

之间加入一行:

target="_self">

浅析js中的showModalDialog的实战应用

IE提供的showModalDialog()方法是一个很好用的Web应用功能,虽然一般的网站应用不是很常见,但一旦涉及到企业应用级的Web开发则就很有用了。现在我用一个简单易懂的例子来说明一下:

这一应用需要两个web文件:

1、父窗口(也即用来控制弹出窗口的那个页面)

showModalDialog.html

---------------------------------------------------------------------------------------

showModalDialog

οnclick="showDialog()">打开Dialog窗口

id="info">

2、子窗口(即将被弹出的那个页面)

dialog.html

-----------------------------------------------------------------------------------------

Dialog

--------------------------------------------------------------------

好了,运行showModalDialog.html即可看出其中的端倪来了。。。

通过这些工作,我实现了将值在父页面和子页面中的相互传递和处理。我想这也正是ms设计showModalDialog()方法的初衷之所在吧。当然,这个例子太简单了。但我的目的只是通过它了解showModalDialog的执行机制。实际应用中需要举一反三才行呢。(完)

【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=(document.cookie.substring(offset,

end))  }  }

return returnvalue;  }  function

loadpopup(){

if

(get_cookie(′popped′)==′′){  openwin()

document.cookie="popped=yes"  }  }

〈/script〉

然后,用〈body οnlοad="loadpopup()"〉

(注意不是openwin而是loadpop啊!)

替换主页面中原有的〈BODY〉这一句即可。

你可以试着刷新一下这个页面或重新进入该页面,

窗口再也不会弹出了。真正的Pop-Only-Once!

写到这里弹出窗口的制作和应用技巧基本上算是完成了,

俺也累坏了,一口气说了这么多,

希望对正在制作网页的朋友有所帮助俺就非常欣慰了。

需要注意的是,JS脚本中的的大小写最好前后保持一致

JS:window.showModalDialog和window.returnValue的应用

fireForm.htm:点击“上传”按钮弹出内部窗口(showModalDialog),代码如下:

http-equiv="Content-Type" content="text/html;

charset=gb2312">

无标题文档

function

onObjMore(url,name,height,width,formName) {

//window.alert(formName.file.type);

var feature =

"dialogWidth:"+width+"px;dialogHeight:"+height+"px;scroll:yes;status:no;help: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;

}

href="css/aljoin.css" rel="stylesheet"

type="text/css">

method="post" action="">

cellspacing="0">

文件

height="25">

type="text"

id="file">

type="button" name="Submit" value="上传文件"

onClick="onObjMore('upfile.htm','upfile',300,300,proForm)">

upfile.htm:点击”关闭”按钮返回window.returnValue值给opener,代码如下:

http-equiv="Content-Type" content="text/html;

charset=gb2312">

无标题文档

function exit() {

window.returnValue =

"images/upload/2004080512.jpg";

window.close();

}

type="button" value="关闭窗口" onClick="exit()">

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

:对话框高度,不小于100px,IE4中dialogHeight 和 dialogWidth

默认的单位是em,而IE5中是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 }

[IE5+]:是否可被改变大小。默认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

var obj = new Object();

obj.name="51js";

window.showModalDialog("modal.htm",obj,"dialogWidth=200px;dialogHeight=100px");

modal.htm

var obj = window.dialogArguments

alert("您传递的参数为:" + obj.name)

-------------------------------

2.可以通过window.returnValue向打开对话框的窗口返回信息,当然也可以是对象。例如:

------------------------------

parent.htm

str

=window.showModalDialog("modal.htm",,"dialogWidth=200px;dialogHeight=100px");

alert(str);

modal.htm

window.returnValue="http://www.51js.com";

现在用asp.net2.0,要实现一个功能:a页面点击一个按钮,弹出一个窗口,选择数据,然后数据返回到a页面的某个textbox里面。

以前我用

if(!IsClientScriptBlockRegistered("clientScript2"))

{

string

strScript2= "

OpenWin2(){var

str=window.showModalDialog('user.aspx',document.Form1.sx.value,'dialogWidth:455px;

dialogHeight:450px;');document.Form1.sx.value=str}";

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

HTTP-EQUIV="pragma" CONTENT="no-cache">

HTTP-EQUIV="Cache-Control" CONTENT="no-cache,

must-revalidate">

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。防止打开新窗口(如提交表单):

target="_self">

5。在模式窗口使用F5刷新页面:

target="_self">

href="filename.htm"

style="display:none">reload...

其中: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弹出的窗口

value="ButtonClick" οnclick="self.close();">

3.

怎样才让在showModalDialog和showModelessDialog的弹出新窗口里操作button,不弹出新窗口?

和之间加

target="_self">

4. showModalDialog的返回值

参照例子:

t1.html:

function showpage()

{

alert(showModalDialog("t2.html"));

}

value="getval" onClick="showpage();">

t2.html

<

function SetVal()

{

returnValue="abc";

close();

}

//-->

value="Btn1" onClick="SetVal();">

是用

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]打开时,

打开对话框的窗口仍可以进行其他的操作,即对话框不总是最上面的焦点,当打开它的窗口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

====================

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)

test2.htm

====================

var a = window.dialogArguments

alert("您传递的参数为:" a)

test3.htm

====================

var a = window.dialogArguments

alert("您传递的参数为window对象,名称:" a.name)

可以通过window.returnValue向打开对话框的窗口返回信息,当然也可以是对象。例如:

test4.htm

===================

var a =

window.showModalDialog("test5.htm")

for(i=0;i

alert(a[i])

test5.htm

===================

function sendTo()

{

var a=new Array("a","b")

window.returnValue = a

window.close()

}

type=button οnclick="sendTo()">

常见问题:

1,如何在模态对话框中进行提交而不新开窗口?

如果你 的 浏览器是IE5.5

,可以在对话框中使用带name属性的iframe,提交时可以制定target为该iframe的name。对于IE4

,你可以用高度为0的frame来作:例子,

test6.htm

===================

window.showModalDialog("test7.htm")

test7.htm

===================

if(window.location.search)

alert(window.location.search)

rows="0,*">

src="about:blank">

src="test8.htm">

test8.htm

===================

method="get">

value="test">

type=submit>

if(window.location.search)

alert(window.location.search)

答案是不能。但在frame里是可以的。

js模式对话框实现用户登录

关键字:

企业应用 js

showModalDialog

以前看过别人写的用js的showModalDialog做用户登录

今天闲着没事做了一下 感觉不错

采用ModalDialog做登录,最大优点就是省去了传递url的麻烦

下面列出关键代码 当作备忘吧

父窗口代码:window.showModalDialog('login.jsp',

window);//这个window作为参数传递到子窗口,当登录成功后可通过这个对象刷新父窗口

子窗口代码:

window.dialogArguments.document.location.reload();//刷新父窗口

window.close(); //关闭自己

还有一个关键代码:

target="_self">

如果不加这段代码,在登录返回之后会打开一个新窗口

我99的兼容IE,FF ,Opera

var win=new MdiWindow( 300 , 200 , 1 ,

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 

 里面加  就会在本页面刷新了

Top

6 楼liu_you(滴水藏海)回复于 2005-10-27 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

function newwin(){

window.showModalDialog("test4.html")

}

test4.html

function newn(){

var s = window.showModalDialog("test5.html")

alert(s);

if (s = "1"){

reload();

}

}

function reload(){

window.location.reload(true);

}

Form4

alert(1);

test5.html

function bak(){

window.returnValue = '1'

window.close()

}

打开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();

}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值