JavaScript窗口功能指南之创建弹出窗口

核心提示： 链接本身（教程的页面）不会改变URL，但是当被点击时，JavaScript窗口功能指南之创建弹出窗口(2)，就调用showMenu（）函数： Tutorial's Pages showMenu（）函数有2个参数，一个是链接对象，我们介绍了如何引用打开窗口的父窗口，最后，它调用函数，

链接本身（教程的页面）不会改变URL，但是当被点击时，就调用showMenu（）函数：

Tutorial's Pages

showMenu（）函数有2个参数，一个是链接对象，它调用函数，另一个是菜单的ID。我们要采取的第一个行为是分配弹出窗口的body对象：

var popupBodyObj = popupObj.document.body;

然后，设置边界为1象素，紫色，固体样式：

popupBodyObj.style.border = "1px purple solid";

填充弹出窗口的内容绝不是一个琐碎的工作，实现的一个方法就是使用innerHTML和outerHTML：

popupBodyObj.innerHTML = menuID.outerHTML;

接着，我们需要对页面的所有链接指派onClick事件处理程序，定义这个事件的响应函数为doclick。

　　for (var i = 0; i < popupBodyObj.all.length; i++) {
　　 if (popupBodyObj.all[i].tagName == "A")
　　　　　　　　 popupBodyObj.all[i].onclick = doClick;
　　}

下面是showMenu（）函数的全部代码：

　　function showMenu(linkObj, menuID) {
　　 var popupObj = window.createPopup();
　　 var popupBodyObj = popupObj.document.body;
　　 popupBodyObj.style.border = "1px purple solid";
　　 popupBodyObj.innerHTML = menuID.outerHTML;
　　 for (var i = 0; i < popupBodyObj.all.length; i++) {
　　　　if (popupBodyObj.all[i].tagName == "A")
　　　　 popupBodyObj.all[i].onclick = doClick;
　　 }
　　 popupObj.show(0, linkObj.offsetHeight, menuID.offsetWidth, menuID.offsetHeight, linkObj);
　　}

函数的最后一条语句是显示弹出窗口。我们将弹出窗口放置于调用它的链接linkObj旁边。如果你省略了这个引用，弹出窗口将参照屏幕左上角被放置。水平偏移是0。为了避免窗口弹出时链接被隐藏，我们要设置对于链接高度的垂直偏移，linkObj.offsetHeight。很自然，我们设置窗口的宽度和高度为初始菜单的宽度(menuID.offsetWidth)和高度(menuID.offsetHeight)。

函数doClick（）是一个2行代码的程序，它修改当前窗口的URL（parent.href）为点击链接的URL（this）：

　　function doClick() {
　　 parent.location = this.href;
　　 return false;
　　}

总结

在这个教程中，我们试图覆盖JavaScript有关窗口相关特征的大多数内容。我们给你展示了如何根据你的要求打开一个新窗口，怎样在窗口中写内容，操纵它，关闭它。同时，我们介绍了如何引用打开窗口的父窗口。最后，我们接触到2个特殊类型的窗口：对话框和弹出窗口。