CreatePopup,showModalDialog,showModalessDialog使用方法--JavaScript/Ajax--编程设计网

=波波日志 > JavaScript/Ajax > CreatePopup,showModalDialog,showModalessDialog使用方法=

[转]CreatePopup,showModalDialog,showModalessDialog使用方法

CreatePopup() Method
　　Internet Explorer 5.5 支持window对象的一个新方法，createPopup()。你可以通过下面的方式创建一个弹出窗口：

-JavaScript

var popupObj = window.createPopup();

当你创建了这个对象时窗口不会被显示，必须调用它的方法：

-JavaScript

popupObj.show(yOffset, xOffset, width, height, referenceObj)

其中：

yOffset 是距离屏幕左上角的水平坐标偏移。
xOffset 是距离屏幕右上角的水平坐标偏移。
width 是弹出窗口的宽度。
height 是弹出窗口的高度。
referenceObj 是一个替代屏幕左上角位置的参数，通过设置它你可以定义 yOffset 和 xOffset 相对于它的位置。

下面是一个定义了背景和边框的弹出窗口示例：

-HTML

<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> 

-JavaScript

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:

-HTML

<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" 。
使用多种字体属性，你可以定义多种字体值。

-HTML

  <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="建立对话框"> 

---- 对话框页面的代码 ----

-HTML

  <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 Explorer4.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

本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/lvlingwy/archive/2007/05/30/1631188.aspx

类别：JavaScript/Ajax　作者：转载　日期：2011-02-12　【评论：0】　

上一篇：fckeditor编辑器在Firefox下出现this.LinkedField is undefined错误　
下一篇：Asp.Net图片base64编码相互转换

暂时没有评论！

发表留言

热门博文