javascript窗口功能指南之创建弹出窗口
敬业的IT人
互联网
佚名
2008-1-10 16:51:17
JavaScript窗口功能指南之创建弹出窗口
（作者：听风编译 2001年01月19日 11:35）
Internet Explorer 5.5支持一个新的window对象的方法：creatPopup（）。你可以向下面一样创建一个弹出窗口：
var popupObj = window.createPopup();
当你创建了这个对象后，弹出窗口并不显示。你必须要调用它的show方法：
popupObj.show(yOffset, xOffset, width, height, referenceObj)
在这里：
yOffset 是弹出窗口距离屏幕左上角的水平偏移。
xOffset 是弹出窗口距离屏幕左上角的垂直偏移。
width 是弹出窗口的宽度。
height 是弹出窗口的高度。
referenceObj 是一个可选参数，它替代屏幕左上角做为引用yOffset 和 xOffset 的参照。
让我们示范一下新的弹出窗口的用处。如果你点击下面的链接，一个所有这个教程的菜单就会弹出来。注意，当菜单弹出时，页面就滚动回到它的顶部。我们怎么样执行这个弹出窗口呢？首先，你需要定义一个可见菜单，它随后会被转载进弹出菜单。为了实现隐藏链接，可以将菜单放置到一个隐藏的位置。我们选择位置（－1000，－1000），并在菜单的style标记中定义它（在HEAD段的某个地方）：
<STYLE>
.menu {position: absolute; top: -1000; left: -1000}
</STYLE>
我们执行菜单做为表格的链接：
<TABLE CLASS=menuID=submenu>
<TR><TD NOWRAP>
<A HREF=http://www.cncms.com.cn/js/names.html TARGET=CONTENT>How to name your windows and frames</A>
</TD></TR>
<TR><TD NOWRAP>
<A HREF=http://www.cncms.com.cn/js/open.html>How to open a new window</A>
</TD></TR>
<TR><TD NOWRAP>
<A HREF=http://www.cncms.com.cn/js/features.html>How to specify the features of a new window</A>
</TD></TR>
<TR><TD NOWRAP>
<A HREF=http://www.cncms.com.cn/js/utilize.html>How to utilize the window features</A>
</TD></TR>
<TR><TD NOWRAP>
<A HREF=http://www.cncms.com.cn/js/exist.html>How to check if a window exists</A>
</TD></TR>
<TR><TD NOWRAP>
<A HREF=http://www.cncms.com.cn/js/reference.html>How to close a window</A>
</TD></TR>
<TR><TD NOWRAP>
<A HREF=http://www.cncms.com.cn/js/manipulate.html>How to manipulate a window</A>
</TD></TR>
<TR><TD NOWRAP>
<A HREF=http://www.cncms.com.cn/js/write.html>How to write content to a window</A>
</TD></TR>
<TR><TD NOWRAP>
<A HREF=http://www.cncms.com.cn/js/opener.html>How to reference the opener</A>
</TD></TR>
<TR><TD NOWRAP>
<A HREF=http://www.cncms.com.cn/js/dialog.html>How to create a dialog box</A>
</TD></TR>
<TR><TD NOWRAP>
<A HREF=http://www.cncms.com.cn/js/popup.html>How to create a pop-up window</A>
</TD></TR>
<TR><TD></TD></TR>
</TABLE>
链接本身（教程的页面）不会改变URL，但是当被点击时，就调用showMenu（）函数：
<A HREF=http://www.cncms.com.cn/js/# style="CURSOR: pointer">
（作者：听风编译 2001年01月19日 11:35）
Internet Explorer 5.5支持一个新的window对象的方法：creatPopup（）。你可以向下面一样创建一个弹出窗口：
var popupObj = window.createPopup();
当你创建了这个对象后，弹出窗口并不显示。你必须要调用它的show方法：
popupObj.show(yOffset, xOffset, width, height, referenceObj)
在这里：
yOffset 是弹出窗口距离屏幕左上角的水平偏移。
xOffset 是弹出窗口距离屏幕左上角的垂直偏移。
width 是弹出窗口的宽度。
height 是弹出窗口的高度。
referenceObj 是一个可选参数，它替代屏幕左上角做为引用yOffset 和 xOffset 的参照。
让我们示范一下新的弹出窗口的用处。如果你点击下面的链接，一个所有这个教程的菜单就会弹出来。注意，当菜单弹出时，页面就滚动回到它的顶部。我们怎么样执行这个弹出窗口呢？首先，你需要定义一个可见菜单，它随后会被转载进弹出菜单。为了实现隐藏链接，可以将菜单放置到一个隐藏的位置。我们选择位置（－1000，－1000），并在菜单的style标记中定义它（在HEAD段的某个地方）：
<STYLE>
.menu {position: absolute; top: -1000; left: -1000}
</STYLE>
我们执行菜单做为表格的链接：
<TABLE CLASS=menuID=submenu>
<TR><TD NOWRAP>
<A HREF=http://www.cncms.com.cn/js/names.html TARGET=CONTENT>How to name your windows and frames</A>
</TD></TR>
<TR><TD NOWRAP>
<A HREF=http://www.cncms.com.cn/js/open.html>How to open a new window</A>
</TD></TR>
<TR><TD NOWRAP>
<A HREF=http://www.cncms.com.cn/js/features.html>How to specify the features of a new window</A>
</TD></TR>
<TR><TD NOWRAP>
<A HREF=http://www.cncms.com.cn/js/utilize.html>How to utilize the window features</A>
</TD></TR>
<TR><TD NOWRAP>
<A HREF=http://www.cncms.com.cn/js/exist.html>How to check if a window exists</A>
</TD></TR>
<TR><TD NOWRAP>
<A HREF=http://www.cncms.com.cn/js/reference.html>How to close a window</A>
</TD></TR>
<TR><TD NOWRAP>
<A HREF=http://www.cncms.com.cn/js/manipulate.html>How to manipulate a window</A>
</TD></TR>
<TR><TD NOWRAP>
<A HREF=http://www.cncms.com.cn/js/write.html>How to write content to a window</A>
</TD></TR>
<TR><TD NOWRAP>
<A HREF=http://www.cncms.com.cn/js/opener.html>How to reference the opener</A>
</TD></TR>
<TR><TD NOWRAP>
<A HREF=http://www.cncms.com.cn/js/dialog.html>How to create a dialog box</A>
</TD></TR>
<TR><TD NOWRAP>
<A HREF=http://www.cncms.com.cn/js/popup.html>How to create a pop-up window</A>
</TD></TR>
<TR><TD></TD></TR>
</TABLE>
链接本身（教程的页面）不会改变URL，但是当被点击时，就调用showMenu（）函数：
<A HREF=http://www.cncms.com.cn/js/# style="CURSOR: pointer">
- 最新文章
- javascript窗口功能指南之创建对话框[01-10]
- javascript窗口功能指南之引用已打开..[01-10]
- javascript窗口功能指南之在窗口中书..[01-10]
- javascript窗口功能指南之操纵窗口[01-10]
- javascript窗口功能指南之检查一个窗..[01-10]
- javascript窗口功能指南之发挥窗口特..[01-10]
- 相关文章
