zoukankan      html  css  js  c++  java
  • DIV模拟弹出窗口(支持拖动)

    <html>
    <head>
    <title>div弹出窗口</title>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <style type="text/css">
    <!--
    #drag{
     250px;
     height:20px;
     border:1px solid #333;
     position:absolute;
     top:17px;
     left:187px;
     z-index:9999;
     text-align:center;
     overflow: visible;
     visibility: hidden;
     }
    -->
    </style>
    <script type="text/javascript">
    <!--
    window.onload=function(){
     drag(document.getElementById('drag'),document.getElementById('lstd'));
    };
    function drag(o,ot){
     ot.onmousedown=function(a){
      var d=document;if(!a)a=window.event;
      var x=a.layerX?a.layerX:a.offsetX,y=a.layerY?a.layerY:a.offsetY;
      if(ot.setCapture)
       o.setCapture();
      else if(window.captureEvents)
       window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);

      d.onmousemove=function(a){
       if(!a)a=window.event;
       if(!a.pageX)a.pageX=a.clientX;
       if(!a.pageY)a.pageY=a.clientY;
       var tx=a.pageX-x,ty=a.pageY-y;
       o.style.left=tx;
       o.style.top=ty;
      };

      d.onmouseup=function(){
       if(o.releaseCapture)
        o.releaseCapture();
       else if(window.captureEvents)
        window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
       d.onmousemove=null;
       d.onmouseup=null;
      };
     };
    }
    //-->

    function showwin()
    {
    //visibility: visible;
     if(document.getElementById('drag').style.visibility!="visible")
     {
      document.getElementById('drag').style.visibility="visible";
      document.getElementById('drag').style.left=((document.body.clientWidth-400)/2);
      document.getElementById('drag').style.top=50;
     }
     
    }
    function closewin()
    {
    //visibility: visible;
     if(document.getElementById('drag').style.visibility!="hidden")
     {
      document.getElementById('drag').style.visibility="hidden";
      document.getElementById('drag').style.left=((document.body.clientWidth-400)/2);
      document.getElementById('drag').style.top=100;
     }
    }
    </script>
    </head>
    <body bgcolor="#FFFFFF" text="#000000">
          <table width="768" border="0" cellspacing="0" cellpadding="0" align="center">
          
            <tr>
              <td width="770" height="25" align="center">
              <div id="drag">
    <table width="250" height="110" border="0" cellpadding="0" cellspacing="0">
            <tr>
              <td height="25" background="top_bg.gif"><table width="100%" border="0" cellspacing="2" cellpadding="2">
                <tr>
                  <td width="98%" nowrap id="lstd" style="cursor:move; font-size:14px;"><strong><!--标题开始-->DIV窗口测试<!--标题结束--></strong></td>
                  <td align="right" onClick="closewin()" style="cursor:hand;" nowrap title="关闭">[X]</td>
                </tr>
              </table></td>
            </tr>
            <tr>
              <td valign="top" bgcolor="#FFFFFF" style=" font-size:12px;"><!--内容开始--><br>
    &nbsp;这里可以放窗口内容<!--内容结束--></td>
            </tr>
          </table></div>
              </td>
            </tr>
          
          </table>
        
    </body>
    </html>
    <script language="javascript">
    showwin();
    </script>


    本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/vince6799/archive/2007/09/25/1799685.aspx

  • 相关阅读:
    Java实现 LeetCode 394 字符串解码
    Java实现 LeetCode 394 字符串解码
    Java实现 LeetCode 392 判断子序列
    Java实现 LeetCode 392 判断子序列
    Java实现 LeetCode 392 判断子序列
    Java实现 LeetCode 391 完美矩形
    Java实现 LeetCode 391 完美矩形
    Java实现 LeetCode 391 完美矩形
    Java实现 LeetCode 390 消除游戏
    Java实现 LeetCode 390 消除游戏
  • 原文地址:https://www.cnblogs.com/lbg280/p/2007963.html
Copyright © 2011-2022 走看看