漂亮的弹出窗口是如何实现的啊？

http://www.scriptlover.com/pages/article.asp?ArticleID=61

解决方案 »

  1.   

    <html>
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
    </head>
    <body>
    <script> 
    var inTable = false; 
    var inDiv = false; var IsIE=!!document.all;if(!IsIE)HTMLElement.prototype.contains=function(o){
      while(o!=null){
        if(o==this)return true;
        o=o.parentNode;
      }
      return false;
    }
    function getPos(o){
      var p=new Object();
      p.x=o.offsetLeft;
      p.y=o.offsetTop+o.offsetHeight;
      while(o=o.offsetParent){
        p.x+=o.offsetLeft;p.y+=o.offsetTop;
      }
      return p
    }
    function ShowDiv(o,click) 
    {
    var p= getPos(o);var d=document.getElementById("testdiv");
    d.style.left=p.x+"px";
    d.style.top=p.y+"px";
    if(click){  if(d.style.display=="none"){d.style.display="block";inTable = false; }
      else d.style.display="none";
    }
    else{inTable = true;  d.style.display = "block"; }
    } 
    function HiddenDiv() 
    { 
    inTable = false; 
    setTimeout("HiddenDivTimeOut()",3000); 
    } 
    function HiddenDivTimeOut() 
    { 
    if(inTable == false && inDiv == false) 
    { 
    document.getElementById("testdiv").style.display = "none"; 
    } 
    } function mouseoverDiv() 
    { 
    inDiv = true; 
    } 
    function mouseoutDiv(div,e) 
    { 
    e=e||event;
    var obj=e.relatedTarget||e.toElement;
    if(div.contains(obj))return;
    inDiv = false; 
    if(inTable == false && inDiv == false) 
    { 
    document.getElementById("testdiv").style.display = "none"; 
    } 
    } 
    </script> 
    </head> 
    <body> 
    <a href="#" onmouseover="ShowDiv(this)" onmouseout="HiddenDiv()">鼠标滑过我</a><br/><br/><br/><br/><br/><br/>
    <a href="#" onclick="ShowDiv(this,true)">鼠标点我</a>
    <div id="testdiv"  onMouseOver="mouseoverDiv()" onMouseOut="mouseoutDiv(this,event)" style="position:absolute; width:400;height:285; z-index:1; padding:5px; background-color: #E1E8FB; layer-background-color: #E1E8FB; border: 10px #ffffff;display:none; overflow-y:auto;"> 
    <table width=200> 
    <tr> 
    <td> 
    tabletabletabletdtatata 
    </td> 
    </tr> 
    <tr> 
    <td> 
    tabletabletabletdtatata 
    </td> 
    </tr> 
    <tr> 
    <td> 
    tabletabletabletdtatata 
    </td> 
    </tr> 
    </table> 
    </div> </body> 
    </html>