javascript模态对话框.docx

javascript模态对话框.docx

《javascript模态对话框.docx》由会员分享，可在线阅读，更多相关《javascript模态对话框.docx（11页珍藏版）》请在冰豆网上搜索。

javascript模态对话框

JavaScript实现模态对话框源代码大全

对话框在Windows应用程序中使用非常普遍，许多应用程序的设定，与用户交互需要通过对话框来进行，因此对话框是Windows应用程序中最重要的界面元素之一，是与用户交互的重要手段。

首先，来说一下对话框：

对话框在Windows应用程序中使用非常普遍，许多应用程序的设定，与用户交互需要通过对话框来进行，因此对话框是Windows应用程序中最重要的界面元素之一，是与用户交互的重要手段。

对话框是一个特殊的窗口，任何对窗口进行的操作（如移动、最大化、最小化等）也可以在对话框实施。

对话框大致可以分为以下两种：

（1）模态对话框：

模态对话框弹出后，独占了系统资源，用户只有在关闭该对话框后才可以继续执行，不能够在关闭对话框之前执行应用程序其他部分的代码。

模态对话框一般要求用户做出某种选择。

（2）非模态对话框：

非模态对话框弹出后，程序可以在不关闭该对话框的情况下继续执行，在转入到应用程序其他部分的代码时可以不需要用户做出响应。

非模态对话框一般用来显示信息，或者实时地进行一些设置。

模态窗口在传统编程语言中很常见，简单的说就是，如果是模态的，就是打开一个子窗口，如果这个子窗口不关闭，就不能操作它的父窗口，原来程序暂停执行，直到这个模态窗口关闭后才回到原来程序继续。

非模态的就是直接显示出来，然后原来的程序继续执行下面的语句，而且其他窗口也呈可用状态。

模态对话框独占了用户的输入，当一个模态对话框打开时，用户只能与该对话框进行交互，而其他用户界面对象收不到输入信息。

应用程序用到的大部分对话框都是模态对话框。

通常浏览器中windwo.open或超链接弹出的新窗口就是非模式窗口,而模式窗口是类似alert那种必须关闭才能响应其他事件的窗口。

明白了对话框的模态和非模态，来看下边在B/s结构应用程序的开发中,有时我们会希望使用者按下按钮后开启一个保持在原窗口前方的子窗口,

在IE中,我们可以使用window.showModelessDialog（）方法用来创建一个显示HTML内容的非模态对话框。

window.showModalDialog（）方法用来创建一个显示HTML内容的模态对话框，由于是对话框，因此它并没有一般用window.open（）打开的窗口的所有属性。

这里是window.showModalDialog弹出窗口的一个实例函数:

--

functionopenWin（src,width,height,showScroll）{

window.showModalDialog

（src,"","location:

No;status:

No;help:

No;dialogWidth:

"+width+";dialogHeig

ht:

"+height+";scroll:

"+showScroll+";"）;

}

//-->

例：

需要注意的是FireFox浏览器中不支持showmodaldialog（），这是因为在最初MozillaSuite中（Firefox是从这个套件衍生），是支持showmodaldialog（）的，不过后来发现showmodaldialog（）存在安全隐患，不久后就取消了对showmodaldialog（）的支持，这个事情还发生在bug194404提交前。

在想出更好的解决方案前，相信Firefox是不会提供对showmodaldialog（）的支持的。

打开弹窗只能使用window.open实现这样的功能，window.open的语法如下:

oNewWindow=window.open（[sURL][,sName][,sFeatures][,bReplace]）

只是,在Firefox下,window.open的参数中,sFeature多了一些功能设定,要让FireFox下开启的窗口跟IE的showModalDialog一样的话,只要在sFeatures中加个modal=yes就可以了,也许可能是出于安全考虑modal=yes，打开的并不是模式窗口，范例如下:

oNewWindow=window.open（[sURL][,sName][,sFeatures][,bReplace]）

由于在firefox没有showModalDialog方法。

则用如下判断来兼容两种浏览器：

--

functionshowDialog（url）

{

if（document.all）//IE

{

feature="dialogWidth:

300px;dialogHeight:

200px;status:

no;help:

no";

window.showModalDialog（url,null,feature）;

}

else

{

//modelessDialog可以将modal换成dialog=yes

feature="width=300,height=200,menubar=no,toolbar=no,location=no,";

feature+="scrollbars=no,status=no,modal=yes";

window.open（url,null,feature）;

}

}

//-->

二、JavaScript+div实现模态对话框：

一个类似163邮箱对话框的功能。

主要是2个层来完成这个效果，第一就是用来锁住下面整个页面的层，要有透明的效果，可以用filter:

alpha（opacity=50）。

还有一个层是用来显示对话框内容的，所以zIndex参数一定要设置的比锁频层高。

对话框的CSS可以自己定义一下，要注意的是，CSS中body一定要定义margin:

0，否则锁频时，会出现空隙，而产生锁频不完整的问题，还有一个就是Select这个控件的问题，因为在IE里，他的zIndex很高，所以锁频层盖不住他，这里可以用两种办法，一种是把他隐藏掉，一种可以把他的disabled属性设置为false，第二种方法只能禁止编辑它，但是还是会在锁频层上当，效果不佳，还是隐藏掉比较好。

--

vart_DiglogX,t_DiglogY,t_DiglogW,t_DiglogH;

functionStrCode（str）

{

if（encodeURIComponent）

returnencodeURIComponent（str）;

if（escape）

returnescape（str）;

}

functionBrowser（）

{

varua,s,i;

this.isIE=false;

this.isNS=false;

this.isOP=false;

this.isSF=false;

ua=navigator.userAgent.toLowerCase（）;

s="opera";

if（（i=ua.indexOf（s））>=0）

{

this.isOP=true;return;

}

s="msie";

if（（i=ua.indexOf（s））>=0）

{

this.isIE=true;

return;

}

s="netscape6/";

if（（i=ua.indexOf（s））>=0）

{

this.isNS=true;

return;

}

s="gecko";

if（（i=ua.indexOf（s））>=0）

{

this.isNS=true;

return;

}

s="safari";

if（（i=ua.indexOf（s））>=0）

{

this.isSF=true;

return;

}

}

functionDialogShow（showdata,ow,oh,w,h）

{

varobjDialog=document.getElementById（"DialogMove"）;

if（!

objDialog）

objDialog=document.createElement（"div"）;

t_DiglogW=ow;

t_DiglogH=oh;

DialogLoc（）;

objDialog.id="DialogMove";

varoS=objDialog.style;

oS.display="block";

oS.top=t_DiglogY+"px";

oS.left=t_DiglogX+"px";

oS.margin="0px";

oS.padding="0px";

oS.width=w+"px";

oS.height=h+"px";

oS.position="absolute";

oS.zIndex="5";

oS.background="#FFF";

oS.border="solid#0001px";

objDialog.innerHTML=showdata;

document.body.appendChild（objDialog）;

}

functionDialogHide（）

{

ScreenClean（）;

varobjDialog=document.getElementById（"DialogMove"）;

if（objDialog）

objDialog.style.display="none";

}

functionDialogLoc（）

{

vardde=document.documentElement;

if（window.innerWidth）{

varww=window.innerWidth;

varwh=window.innerHeight;

varbgX=window.pageXOffset;

varbgY=window.pageYOffset;

}else{

varww=dde.offsetWidth;

varwh=dde.offsetHeight;

varbgX=dde.scrollLeft;

varbgY=dde.scrollTop;

}

t_DiglogX=（bgX+（（ww-t_DiglogW）/2））;

t_DiglogY=（bgY+（（wh-t_DiglogH）/2））;

}

functionScreenConvert（）{

varbrowser=newBrowser（）;

varobjScreen=document.getElementById（"ScreenOver"）;

if（!

objScreen）

varobjScreen=document.createElement（"div"）;

varoS=objScreen.style;

objScreen.id="ScreenOver";

oS.display="block";

oS.top=oS.left=oS.margin=oS.padding="0px";

if（document.body.clientHeight）{

varwh=document.body.clientHeight+"px";

}elseif（window.innerHeight）{

varwh=window.innerHeight+"px";

}else{

varwh="100%";

}

oS.width="100%";

oS.height=wh;

oS.position="absolute";

oS.zIndex="3";

if（（!

browser.isSF）&&（!

browser.isOP））{

oS.background="#cccccc";

}else{

oS.background="#cccccc";

}

oS.filter="alpha（opacity=50）";

oS.opacity=40/100;

oS.MozOpacity=40/100;

document.body.appendChild（objScreen）;

varallselect=document.getElementsByTagName（"select"）;

for（vari=0;i

allselect[i].style.visibility="hidden";

}

functionScreenClean（）

{

varobjScreen=document.getElementById（"ScreenOver"）;

if（objScreen）

objScreen.style.display="none";

varallselect=document.getElementsByTagName（"select"）;

for（vari=0;i

allselect[i].style.visibility="visible";

}

functionDemo（string）

{

ScreenConvert（）;

varShowDiv="

10px;\">"+string+"