GZICP.com   
 
    返回首页
    联系我们
 
 
     

JavaScript窗口功能——创建对话框

www.gzicp.com   2005年1月9日 13:23:18
 

  JavaScript支持几种内建的对话框:window.alert()、window.confirm()以及window.prompt()。当弹出一个对话框时,用户就不可以再聚焦到初始页面,除非对话框操作结束。换言之,对话框永远是被聚焦的。Internet Explorer支持一些方法,使用它们能让你在任何新窗口上应用它们:

  showModalDialog() (Internet Explorer 4 和以上版本)

  showModelessDialog() (Internet Explorer 5 和以上版本)

  以下是这些方法的语法:

  vReturnValue = window.showModalDialog(sURL[, vArguments][, sFeatures]);

  vReturnValue = window.showModelessDialog(sURL[, vArguments][, sFeatures]);

  第1个参数是一个字符串,它指定了在新窗口中装载并显示的文档URL。第2个参数,vArguments,是一个variant,它指定了显示文档的命令。使用这个参数时,可以传递任意类型的数组或者数值。对话框能够从window对象的dialogArguments属性中将数值传递给调用者。

  当通过其中一个方法打开一个新窗口时,新窗口(对话框)的window对象特写了dialogArguments属性,它包含了分配给调用方法的vArguments参数的数值。来看看下面的语句:

  window.showModalDialog("modalurl.html", window);

  注意,第2个命令参数实际上是当前浏览器窗口的window对象。下面是文件modalurl.html的代码:

  <HTML>

  <HEAD>

  <TITLE>Change the URL</TITLE>

  <SCRIPT LANGUAGE="JavaScript">

  <!--

  function load(menu) {

   if (window.dialogArguments && dialogArguments.location) {

    dialogArguments.location.href = menu.options[menu.selectedIndex].value;

    window.close();

   }

  }

  // -->

  </SCRIPT>

  </HEAD>

  <BODY>

  Pick your favorite investment site:<P>

  <FORM><SELECT NAME="menu">

  <OPTION VALUE="Fool.com’>http://www.fool.com/">Fool.com (The Motley Fool)

  <OPTION VALUE="MoneyCentral’>http://www.investor.com/">MoneyCentral Investor

  <OPTION VALUE="TheStreet.com’>http://www.thestreet.com/">TheStreet.com

  </SELECT>

  <INPUT TYPE="button" VALUE="Load" onClick="load(this.form.menu)"></FORM>

  </BODY>

  </HTML>

  当用户在对话框中点击“Load”按钮,打开者窗口的URL就变为选择的数值。为了数值窗口文档的URL,我们必须分配一个数值给需要window对象的location.href属性。在这里,我们指定调用者的window对象做为showModalDialog()方法的第2个参数,所以,新窗口(对话框)中dialogArguments属性就对应于调用者的window对象。

  注意函数开始的对象检测程序段。因为dialogArguments属性只存在于由showModalDialog()和showModelessDialog()方法创建的窗口中,所以,我们必须确认在使用它们前这个属性是否存在。而且,我们需要查找一个location.href属性来确认dialogArguments属性真正地对应于一个合法的window对象。

  load()函数的最后语句关闭对话框,从而指定的文档能够在原始窗口被装载。注意,如果我们使用showModelessDialog()方法替代showModalDialog()方法,我们就不需要特别地关闭窗口,因为,即使对话框仍然打开时,新的URL依然会在下面的窗口(打开者)被装载。在这里,当调用者的URL改变时(调用新页面),对话框自动关闭。  当在Internet Explorer 5中执行showModelessDialog()时,出现一个对话框,它位于浏览器窗口前面。用户仍旧可以操纵下面的窗口,但是对话框会始终在上面。对话框与打开它的浏览器窗口相关联,所以,如果用户产生了一个不同的窗口,对话框与它的产生者一同被隐藏在后面。注意,一个modeless对话框实际上连接到一个包含产生它的脚本的文档,所以,如果用户在打开者窗口中装载另一个不同的URL,对话框将自动关闭。

  Internet Explorer 4 中的showModalDialog()方法就完全不同。它建立一个modal对话框,并一直保持焦点直到被关闭。用户根本不能访问到打开者窗口。一个modal对话框与打开它的浏览器窗口相关联,所以,如果用户产生一个不同的浏览器窗口,对话框就与它的原始窗口一起被隐藏在活动窗口的下面。

  现在是回来讨论showModalDialog()和showModelessDialog()方法的参数的时候了。第3个参数,sFeatures,是一个字符串,它指定了对话框窗口的修饰特征,具体就是使用下面的一个或者多个以逗号分隔的数值:

  dialogHeight: iHeight

  设置对话框窗口的高度。尽管用户能够手工地调整一个对话框的高度为一个较小数值(要求产生的对话框是大小可变的),但是你可以指定的最小dialogHeight是100象素(pixels)。注意,在Internet Explorer 4.0中dialogHeight和dialogWidth的默认测量单位“em”,而在Internet Explorer 5中则是px(象素)。为了保持一致性,当设计modal对话框时,请以象素为单位指定dialogHeight和dialogWidth。

  dialogWidth: iWidth

  设置对话框窗口的宽度。

  dialogLeft: iXPos

  设置对话框窗口相对于桌面左上角的left位置。

  dialogTop: iYPos

  设置对话框窗口相对于桌面左上角的top位置。

  center: {yes | no | 1 | 0 }

  指定是否将对话框在桌面上居中,默认值是“yes”。为了避免居中,你可以设定为dialogLeft或者dialogTop。

  help: {yes | no | 1 | 0 }

  指定对话框窗口中是否显示上下文敏感的帮助图标。默认值是“yes”。

  resizable: {yes | no | 1 | 0 } (Internet Explorer 5 and above)

  指定是否对话框窗口大小可变。默认值是“no”。

  status: {yes | no | 1 | 0 } (Internet Explorer 5 和以上版本)

  指定对话框窗口是否显示状态栏。对于非依赖对话框窗口,默认值是“yes”;对于依赖对话框窗口,默认值是 “no”。

对象检测
  showModalDialog() 和 showModelessDialog() 方法并非被所有支持JavaScript的浏览器所支持。在调用任何一个方法之前,我们必须确认它们的有效性:

  if (window.showModalDialog) {

   ...

  }

  if (window.showModelessDialog) {

   ...

  }

  如果用户的浏览器不能支持需要的方法,你也许希望考虑一个可供选择的行为,这可以通过调用window.open()方法来实现:

  if (window.showModalDialog) {

   win = window.showModalDialog("mydialog.html", ...);

  } else {

   win = window.open("mydialog.html", ...);

  }

一个交叉浏览器Modal对话框
  看看下面的定义 (Navigator适用):

  <BODY onBlur="window.focus()">

  如果你在< body >标记中使用上面的事件处理程序,那么包含文档的窗口就会被聚焦,直到用户关闭它。在这个仅Navigator适用的技术与Internet Explorer的showModalDialog()方法之间,有些区别。被聚焦的窗口没有与指定的窗口或者文档相关联。就是说,用户不能调上来其它浏览器窗口,即使不是打开对话框的窗口。

www.csdn.net 听风

相关文章
·JavaScript窗口功能——命名窗口和框架(2005年01月09日)
·JavaScript窗口功能——打开一个新窗口(2005年01月09日)
·JavaScript窗口功能——创建弹出窗口(2005年01月09日)
·JavaScript窗口功能——定制新窗口(2005年01月09日)
·JavaScript窗口功能——发挥窗口特征(2005年01月09日)
·JavaScript窗口功能——检查一个窗口是否存在(2005年01月09日)
·JavaScript窗口功能——关闭窗口(2005年01月09日)
·JavaScript窗口功能——操纵窗口(2005年01月09日)
·JavaScript窗口功能——在窗口中书写内容(2005年01月09日)
·JavaScript窗口功能——引用已打开的窗口(2005年01月09日)
·JavaScript窗口功能——创建对话框(2005年01月09日)
最新文章
·JavaScript窗口功能——命名窗口和框架  (2005年01月09日)
·JavaScript窗口功能——打开一个新窗口  (2005年01月09日)
·JavaScript窗口功能——创建弹出窗口  (2005年01月09日)
·JavaScript窗口功能——定制新窗口  (2005年01月09日)
·JavaScript窗口功能——发挥窗口特征  (2005年01月09日)
·JavaScript窗口功能——检查一个窗口是否存在  (2005年01月09日)
·JavaScript窗口功能——关闭窗口  (2005年01月09日)
·JavaScript窗口功能——操纵窗口  (2005年01月09日)
·JavaScript窗口功能——在窗口中书写内容  (2005年01月09日)
·JavaScript窗口功能——引用已打开的窗口  (2005年01月09日)
·JavaScript窗口功能——创建对话框  (2005年01月09日)





 
 
Copyright © 1999-2005 GZICP.com All Rights Reserved