window.createPopup

来源：互联网发布：数据库分区管理办法编辑：程序博客网时间：2024/05/17 04:56

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>

　　我们执行菜单做为表格的链接：

　　　　<A HREF="names.html" TARGET="CONTENT">How to name your windows and frames</A>

　　 </TD></TR>

　　　　<A HREF="open.html">How to open a new window</A>

　　 </TD></TR>

　　　　<A HREF="features.html">How to specify the features of a new window</A>

　　 </TD></TR>

　　　　<A HREF="utilize.html">How to utilize the window features</A>

　　 </TD></TR>

　　　　<A HREF="exist.html">How to check if a window exists</A>

　　 </TD></TR>

　　　　<A HREF="reference.html">How to close a window</A>

　　 </TD></TR>

　　　　<A HREF="manipulate.html">How to manipulate a window</A>

　　 </TD></TR>

　　　　<A HREF="write.html">How to write content to a window</A>

　　 </TD></TR>

　　　　<A HREF="opener.html">How to reference the opener</A>

　　 </TD></TR>

　　　　<A HREF="dialog.html">How to create a dialog box</A>

　　 </TD></TR>

　　　　<A HREF="popup.html">How to create a pop-up window</A>

　　 </TD></TR>

　　</TABLE>

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

　　<A HREF='#' ONCLICK='showMenu(this, submenu)'>Tutorial's Pages</A>

　　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;

　　}

附

<html>
<body onload="ChangeDivColor()">

<script>
var oPopup=window.createPopup();

function GetTextBoxDown(){
       oPopup.document.body.innerHTML=mydownDiv.innerHTML;
    var top=document.getElementById("mytext").offsetHeight;

       oPopup.show(0,top, 300, 100, mytext);
}

function ChangeDivColor(){
   var parentDiv=document.getElementById("mydownDiv").childNodes;
   for(i=0;i<parentDiv.length;i++){
          //parentDiv[i].addEventListener("onMouseOver","OverChangeColor",true);
       //parentDiv[i].addEventListener("onmouseout","OutChangeColor",true);
      }
}

function OverChangeColor(){
       alert("OverChangeColor");
}

function OutChangeColor(){
       alert("OutChangeColor");
}
</script>

<br><br><br>
Email地址：
<input type="text" id=mytext onclick="GetTextBoxDown()" style="width:550px" />
<br>
<br>
<div id=mydownDiv style="Display:none">
     <div style="PADDING-RIGHT: 10px; PADDING-LEFT: 10px; LEFT: 0px; OVERFLOW-X: hidden; PADDING-BOTTOM: 10px;

SCROLLBAR-HIGHLIGHT-COLOR: #99ccff; OVERFLOW: scroll; WIDTH: 300px; SCROLLBAR-ARROW-COLOR: white; PADDING-TOP:

10px; BORDER-BOTTOM: black 2px solid; SCROLLBAR-BASE-COLOR: #3366cc; POSITION: absolute; TOP: 0px; HEIGHT:

100px; BACKGROUND-COLOR: #e4e4e4">
    <div ondblclick="parent.mytext.value=this.innerText;parent.oPopup.hide();">QQ:359252363</div>
    <div>网名:和尚洗漂柔</div>
    <div>手机:13805057479</div>
    <div>lqscoke@126.com</div>
     </div>
</div>

</body>
</html>