万企互联-专注高端网站建设
扫描关注万企互联微信公众账号

扫一扫微信二维码

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

网页制作2012/5/13 2373
  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="names.html" TARGET="CONTENT">How to name your windows and frames</A>
  
     </TD></TR>
  
     <TR><TD NOWRAP>
  
      <A HREF="open.html">How to open a new window</A>
  
     </TD></TR>
  
     <TR><TD NOWRAP>
  
      <A HREF="features.html">How to specify the features of a new window</A>
  
     </TD></TR>
  
      <TR><TD NOWRAP>
  
      <A HREF="utilize.html">How to utilize the window features</A>
  
     </TD></TR>
  
     <TR><TD NOWRAP>
  
      <A HREF="exist.html">How to check if a window exists</A>
  
     </TD></TR>
  
     <TR><TD NOWRAP>
  
      <A HREF="reference.html">How to close a window</A>
  
     </TD></TR>
  
     <TR><TD NOWRAP>
  
      <A HREF="manipulate.html">How to manipulate a window</A>
  
     </TD></TR>
  
     <TR><TD NOWRAP>
  
      <A HREF="write.html">How to write content to a window</A>
  
     </TD></TR>
  
     <TR><TD NOWRAP>
  
      <A HREF="opener.html">How to reference the opener</A>
  
     </TD></TR>
  
     <TR><TD NOWRAP>
  
      <A HREF="dialog.html">How to create a dialog box</A>
  
     </TD></TR>
  
     <TR><TD NOWRAP>
  
      <A HREF="popup.html">How to create a pop-up window</A>
  
     </TD></TR>
  
     <TR><TD></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;
  
    }
  
  总结
    在这个教程中,我们试图覆盖JavaScript有关窗口相关特征的大多数内容。我们给你展示了如何根据你的要求打开一个新窗口,怎样在窗口中写内容,操纵它,关闭它。同时,我们介绍了如何引用打开窗口的父窗口。最后,我们接触到2个特殊类型的窗口:对话框和弹出窗口。
文章分类
网页制作
打开微信,点击底部的“发现”,使用“扫一扫”即可将网页分享至朋友圈。
万企互联 咸阳网站建设 咸阳微信营销 IDC主机测评 IP地址查询 万企工具 四六互联 四六技术网 品多技术网 超越彼岸BEYOND 六佰号 秦川云 秦川云影院