本文详细介绍了Internet Explorer浏览器中的弹出窗口方法createPopup()及其使用方式，同时还深入探讨了showModalDialog()和showModelessDialog()两种对话框的特性与应用技巧。
CreatePopup() Method
Internet Explorer 5.5 支持window对象的一个新方法，createPopup()。你可以通过下面的方式创建一个弹出窗口：
var popupObj = window.createPopup();
当你创建了这个对象时窗口不会被显示，必须调用它的方法：
popupObj.show(yOffset, xOffset, width, height, referenceObj)
其中：
yOffset 是距离屏幕左上角的水平坐标偏移。
xOffset 是距离屏幕右上角的水平坐标偏移。
width 是弹出窗口的宽度。
height 是弹出窗口的高度。
referenceObj 是一个替代屏幕左上角位置的参数，通过设置它你可以定义 yOffset 和 xOffset 相对于它的位置。
下面是一个定义了背景和边框的弹出窗口示例：
<SCRIPT LANGUAGE="JavaScript">
<!--
var oPopup = window.createPopup();
var oPopupBody = oPopup.document.body;
oPopupBody.style.backgroundColor = "magenta";
oPopupBody.style.border = "solid blue 3px";
oPopupBody.innerHTML = "Click outside <B>popup</B> to close.";
oPopup.show(300, 80, 200, 50, document.body);
// -->
</SCRIPT>
function MzPopupLayer(iframe)
{
this.id= this.getHashCode();
this.name=this.id +"_popup";
this.usePopup = false;
if (typeof iframe=="undefined")
{
try
{
this.element =window.createPopup();
this.usePopup=true;
this.document=this.element.document;
}
catch (ex){this.usePopup = false;}
}
this.isOpen=false;
this.binder=null;
this.lock=false;
this.autoFit=false;
if(!this.usePopup)
{
if(document.all)
{
if(document.readyState=="complete") document.body.innerHTML+=
"<iframe id='"+ this.id +"' name='"+ this.name +"'></iframe>";
else document.write("<iframe id='"+this.id+"' name='"+this.name+"'></iframe>");
this.element=document.getElementById(this.id);
}
else
{
this.element = document.createElement("IFRAME");
this.element.id = this.id;
this.element.name=this.name;
document.body.appendChild(this.element);
}
with(this.element.style)
{
width=0; height=0; borderWidth=0;
zIndex=MzPopupLayer.zIndex++; position="absolute";
}
this.style = this.element.style;var me=this;
document.attachEvent("onclick", function(e)
{
e=e||window.event; e=e.target||e.srcElement;
if( me.lock) me.srcElement=e;
if(!me.lock && me.isOpen && e!=me.srcElement) me.hide();
});
document.attachEvent("oncontextmenu", function(e)
{
if(me.isOpen) me.hide();
});
document.attachEvent("onkeydown", function(e)
{
e=e||window.event; var k=e.which||e.keyCode;
if(!me.lock && me.isOpen && (k==27 || k==9)) me.hide();
});
window.attachEvent("onscroll", function(){if(me.isOpen)me.hide();});
function sleep(n){var start=new Date().getTime(); //for opera only
while(true) if(new Date().getTime()-start>n) break;}
if(window.opera){sleep(500);this.document=this.element.document;}
else this.document=frames[this.name].document;
var html = "<html><head></head><body style='border-width:0;padding:0;"+
"margin:0;overflow:hidden;background-color:white'></body></html>";
this.document.write(html); this.document.close();
if(window.opera) this.document=this.element.document;
else this.document=frames[this.name].document;
}
}
MzPopupLayer.Extends(System, "MzPopupLayer");
MzPopupLayer.zIndex=520;
MzPopupLayer.prototype.show = function(left, top, width, height, trigger)
{
if(this.usePopup)
{
this.element.show(left, top, width, height, trigger);
this.isOpen=this.element.isOpen;
}
else
{
this.lock=true;
this.isOpen=true;
this.binder=trigger;
this.element.style.top = top;
this.element.style.left = left;
this.element.style.width = width;
this.element.style.height = height;
setTimeout("Instance('"+this.id+"').lock=false",1);
}
};
MzPopupLayer.prototype.bind = function(trigger, width, height)
{
var e=trigger, x=e.offsetLeft, y=e.offsetTop;
while(e=e.offsetParent){x+=e.offsetLeft; y+=e.offsetTop;}
var DL, DT, top=0, left=0;
if(window.pageXOffset){DL=window.pageXOffset;}
else if(document.documentElement&&document.documentElement.scrollLeft){
DL=document.documentElement.scrollLeft;}
else if(document.body){DL=document.body.scrollLeft;}
if(window.pageYOffset){DT=window.pageYOffset;}
else if(document.documentElement&&document.documentElement.scrollTop){
DT=document.documentElement.scrollTop;}
else if(document.body){DT=document.body.scrollTop;}
if(this.usePopup)
{
if(this.autoFit)
{
this.element.show(0, 0, 1, 1, trigger);
width = this.document.body.scrollWidth;
height = this.document.body.scrollHeight;
}
top=trigger.offsetHeight;
if(screen.availHeight-(screenTop+y+top-DT)<height) top=0-height;
}
else
{
var DW, DH;
if(window.innerWidth){DW=window.innerWidth;}
else if(document.documentElement&&document.documentElement.clientWidth){
DW=document.documentElement.clientWidth;}
else if(document.body){DW=document.body.clientWidth;}
if(window.innerHeight){DH=window.innerHeight;}
else if(document.documentElement&&document.documentElement.clientHeight){
DH=document.documentElement.clientHeight;}
else if(document.body){DH=document.body.clientHeight;}
try{this.element.style.width="1px"; //possible error on reload page Netscape
this.element.style.height="1px";
this.document.body.style.overflow="auto";
if(!window.opera) var EW=this.document.body.scrollWidth; //always retrieve inexact width in Opera
var EH=this.document.body.scrollHeight;
this.document.body.style.overflow="hidden";}
catch(ex){EW=width||100; EH=height||100;} width=EW; height=EH;
var OH=trigger.offsetHeight;
if(window.opera && trigger.tagName=="INPUT"){x+=3; y+=3; OH-=6;} //repair for Opera
if(DT+DH-y-OH<height&&y-DT>height) top=y-height; else top=y+OH;
if (x + width > DL + DW) left = DW + DL - width;
else if (x - DL < 0) left = DL; else left = x;
}
this.show(left, top, width, height, trigger);
};
MzPopupLayer.prototype.hide = function()
{
if(this.usePopup)
{
this.element.hide();
this.isOpen=this.element.isOpen;
}
else
{
this.isOpen=false;
this.binder=null;
this.srcElement=null;
with(this.element.style){width="0px"; height="0px";}
}
};
MzPopupLayer.prototype.createStyleSheet = function(url)
{
if(this.document.createStyleSheet)
{
if(typeof url!="string") return this.document.createStyleSheet();
else return this.document.createStyleSheet(url);
}
var e=null, d=this.document;if(url){ e=d.createElement("LINK");
e.href=url;e.type="text/css"; e.rel="Stylesheet";}else{
e=d.createElement("STYLE"); e.type="text/css"; }
d.getElementsByTagName("HEAD")[0].appendChild(e);
try{e = d.styleSheets[d.styleSheets.length-1];}catch (ex){
throw "Your browser isn't support document.styleSheets!";}
return new MzStyleSheet(e);
}
function MzStyleSheet(styleSheet)
{
this.self=styleSheet;
if (this.self.rules) this.rules=this.self.rules;
else if (this.self.cssRules) this.rules=this.self.cssRules;
this.addRule = function(selector,style,i)
{
if (this.self.addRule) return this.self.addRule(selector,style,i);
else if (this.self.insertRule)
{
if(typeof i=="undefined")i=this.self.cssRules.length;
return this.self.insertRule(selector+"{"+style+"}",i);
}
};
this.removeRule = function(i)
{
if (this.self.removeRule) this.self.removeRule(i);
else if (this.self.deleteRule)
{
if(typeof i=="undefined")i=0;this.self.deleteRule(i);
}
};
}
--------------------------------------------------------------------------------
成员属性列表：
.document 层体的document对象，可以做如 document.body 之类的操作
.isOpen 布尔值 指层的显示/隐藏状态
.autoFit 布尔值 层的高宽将自适应其加载的内容高宽
.usePopup 布尔值 指层目前是使用window.createPopup()还是使用iframe
成员方法列表：
.show(left, top, width, height, trigger)
.bind(trigger, width, height)
.hide()
.createStyleSheet([url]) //此方法在Opera里有BUG
弹出窗口方:
showModalDialog()打开对话框，一直保持焦点直到关闭。
showModalessDialog()打开对话框，期间可以进行其它操作。
sFeatures必须选择至少一项，否则会出错。
被弹出窗口:
window.close():关闭窗口
window.returValue=var;返回一个值，可以是任意类型。
语法:
vReturnValue = window.showModalDialog(sURL [, vArguments] [, sFeatures])
vReturnValue = window.showModelessDialog(sURL [, vArguments] [, sFeatures])
说明:
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个字符。也可以传递对象，
Example:
<SCRIPT>
function fnRandom(iModifier){
return parseInt(Math.random()*iModifier);
}
function fnSetValues(){
var iHeight=oForm.oHeight.options[
oForm.oHeight.selectedIndex].text;
if(iHeight.indexOf("Random")>-1){
iHeight=fnRandom(document.body.clientHeight);
}
var sFeatures="dialogHeight: " + iHeight + "px;";
return sFeatures;
}
function fnOpen(){
var sFeatures=fnSetValues();
window.showModalDialog("showModalDialog_target.htm", "",
sFeatures)
}
</SCRIPT>
<FORM NAME=oForm>
Dialog Height <SELECT NAME="oHeight">
<OPTION>-- Random --
<OPTION>150
<OPTION>200
<OPTION>250
<OPTION>300
</SELECT>
Create Modal Dialog Box
<INPUT TYPE="button" VALUE="Push To Create"
onclick="fnOpen()">
</FORM>
showModalDialog版本：DHTML Object Model 返回值：有
语法：
vReturnValue = window . showModalDialog ( sURL , vArguments , sFeatures )
参数：
sURL 必选项。字符串(String)。指定要载入和显示的 URL 。
vArguments 可选项。指定供显示文档时使用的变量。利用这个参数可以传递任何类型的值，包括包含多个值得的数组。对话框可以通过调用程序从 window 对象的 dialogArguments 属性提取这些值。
sFeatures 可选项。字符串(String)。指定对话框的窗口装饰。使用下面的值。多个之间用分号隔开。 dialogHeight : sHeight 设置对话框的高度。
dialogLeft : sXPos 设置对话框左上角相对于桌面的横坐标。
dialogTop : sYPos 设置对话框左上角相对于桌面的纵坐标。
dialogWidth : sWidth 设置对话框的宽度。
center : yes | no | 1 | 0 | on | off 指定对话框是否显示于桌面正中。默认值为 yes 。
dialogHide : yes | no| 1 | 0 | on | off 指定当打印或打印预览时对话框是否隐藏。仅仅当对话框是由被信任的程式打开的时候此参数才可用。默认值为 no 。
edge : sunken | raised 指定对话框窗口边框样式为凹下还是凸起的。默认值为 raised 。
help : yes | no | 1 | 0 | on | off 指定对话框是否显示上下文相关的帮助图标。默认值为 yes 。
resizable : yes | no | 1 | 0 | on | off 指定对话框是否可以被用户改变尺寸。默认值为 no 。
scroll : yes | no | 1 | 0 | on | off 指定对话框是否显示滚动条。默认值为 yes 。
status : yes | no | 1 | 0 | on | off 指定对话框是否显示状态条。对于不被信任的对话框默认值为 yes 。对于被信任的对话框默认值为 no 。
unadorned : yes | no | 1 | 0 | on | off 指定对话框是否显示 chrome 样式边框。仅仅当对话框是由被信任的程式打开的时候此参数才可用。默认值为 no 。
返回值：
vReturnValue:返回等同于打开的对话框窗口( window )的 returnValue 属性值的值。
说明：
建立模式对话框显示指定的文档。
模式对话框被打开后就会始终保持输入焦点。除非对话框被关闭，否则用户无法切换窗口。
因为无模式对话框能够包含链接指向不同域名下的资源，请不要使用 vArguments 参数传递用户可能认为私有的信息。在模式对话框内部 vArguments 参数可以被模式对话框使用 window 对象的 dialogArguments 属性提取和使用。假如 vArguments 参数被定义为字符串(String)，其可以被传递到无模式对话框的最大长度为 4096 个字符。超出的会被截去。
在 IE4+ 中，你可以禁止对话框窗口的滚动条。要关闭滚动条，可以设置对话框窗口内文档的 body 对象的 SCROLL 属性值为 false ，或是从可信任的程式里调用对话框。
在 IE5+ 中，你可以通过使用 sFeatures 参数中的 status 和 resizable 值控制模式对话框。你可以用和使用样式表同样的方法设置默认的字体设置。例如： "font:3; font-size:4" 。
使用多种字体属性，你可以定义多种字体值。
<script>
var vDialog=null;
function rdl_doDialog(){
vDialog=showModalDialog("rdl_showmodelessdialog_demo.html",window,"status:no;resizable:yes;dialogHeight:210px;dialogWidth:360px;unadorne:yes");
if (vDialog != null) vDialog.idDialogInput.value=idOpenerInput.value;
}
</script>
<input type=text id=idOpenerInput value="传递的文字"><br><br>
<input type=button onclick="rdl_doDialog();" value="建立对话框">
---- 对话框页面的代码 ----
<script>
function window.onunload() {
dialogArguments.vDialog=null;
}
</script>
<input type=text id=idDialogInput><br><br>
<input type=button onclick="dialogArguments.idOpenerInput.value=idDialogInput.value;" value="传递文字">
<input type=button onclick="window.close();" value="关闭">
在 Internet Explorer 4.0 中， dialogHeight 和 dialogWidth 的缺省单位为 em ，而在 Internet Explorer 5.0 及以上版本中默认单位为 px 。其值可以是整数(Integer)或浮点数(Floating-point number)。因为绝对长度单位(cm, mm, in, pt, pc, px)和相对长度单位(em , ex)的差别， 要想保证预期的显示结果，在设计时应使用 px 单位。
倘若对话框是可以被改变尺寸的，虽然用户的手动改变可以达到更小的值，但是设计时你可以指定的 dialogHeight 的最小值为 100px 。你可以通过指定 dialogLeft 或 dialogTop 的值来取消对话框显示的居中。即使 center 默认值为 yes 。
应用于：
IE4.0+ window
扫一扫
6673
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
