window.createPopup

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段的某个地方):

  

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

  

  

  

  

    

  

  

  

  

  

  

  

  

  

  链接本身(教程的页面)不会改变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;

  }

< 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 οndblclick="parent.mytext.value=this.innerText;parent.oPopup.hide();" > QQ:359252363 div >
    
< div > 网名:和尚洗漂柔 div >
    
< div > 手机:13805057479 div >
    
< div > [email protected] div >
     
div >
div >


body >
html >

你可能感兴趣的:(window.createPopup)