JavaScript 弹出一个可移动的框

最新推荐文章于 2021-01-16 13:41:30 发布

原创最新推荐文章于 2021-01-16 13:41:30 发布 · 2.9k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #function #null #ie #border #div

本文介绍了一个使用JavaScript实现的可移动弹出窗口。该窗口包括阴影部分和内容部分，并且可以通过鼠标拖动改变位置。适用于WinXP SP2环境下的IE6、IE7及Firefox浏览器。

  function stopdrag(){
   currIDb=null;
   currIDs=null;
   NS6bugfix();
  }

  function grab_id(evt){
   xoff=parseInt(this.IDb.style.left)-((IE5)? event.clientX+document.body.scrollLeft : evt.pageX);
   yoff=parseInt(this.IDb.style.top)-((IE5)? event.clientY+document.body.scrollTop : evt.pageY);
   currIDb=this.IDb;
   currIDs=this.IDs;
  }

  function NS6bugfix(){
   if(!IE5){
    self.resizeBy(0,1);
    self.resizeBy(0,-1);
   }}

   function incrzindex(){
    zctr=zctr+2;
    this.subb.style.zIndex=zctr;
    this.subs.style.zIndex=zctr-1;
   }

function createPopup(id, width, height, isdraggable,x,y,boxcolor,barcolor,shadowcolor){

    if(W3C){
     zctr+=2;
     totz=zctr;

     this.IDh=document.getElementById(id+'_h');
     this.IDh.IDb=document.getElementById(id+'_b');

     this.IDh.IDs=document.getElementById(id+'_s');

     this.IDh.IDbd=document.getElementById(id+'_bd');

     this.IDh.IDb.subs=this.IDh.IDs;
     this.IDh.IDb.subb=this.IDh.IDb;
     this.IDh.IDb.IDov=document.getElementById(id+'_ov');

     //IDs 是阴影部份
     this.IDh.IDs.style.width=width;
     this.IDh.IDs.style.height=height;
     this.IDh.IDs.style.left=x+10;
     this.IDh.IDs.style.top=y+10;
     this.IDh.IDs.style.backgroundColor=shadowcolor;


                   //IDB 是内容部份
                    this.IDh.IDb.style.width=width;
                    this.IDh.IDb.style.height=height;
     this.IDh.IDb.style.left=x;
     this.IDh.IDb.style.top=y;
     this.IDh.IDb.style.backgroundColor=boxcolor;
     this.IDh.IDb.style.border='outset '+barcolor+' 2px';
     //"outset #FF0000 2px";


     this.IDh.IDbd.style.backgroundColor=barcolor;
     this.IDh.IDbd.style.width=width;


                    this.IDh.style.width=width-20;

                    this.IDh.IDb.IDov.width=width;

     if(IE5){
     //DivA_b.style.border
      this.IDh.IDb.IDov.style.width=width-6;
      this.IDh.IDb.IDov.style.height=height-22;
      this.IDh.IDb.IDov.style.scrollbarBaseColor=this.IDh.IDb.style.backgroundColor;
      this.IDh.IDb.IDov.style.overflow="auto";
     }else{
      this.IDh.IDs.style.MozOpacity=.5;
     }
     this.IDh.IDb.onmousedown=incrzindex;
     if(isdraggable){
      this.IDh.onmousedown=grab_id;
      this.IDh.onmouseup=stopdrag;
     }
     }
     }

if(W3C)document.onmousemove=trackmouse;
if(!IE5 && W3C)window.onload=NS6bugfix;

    </script>

<div id="DivA_b" style="position:absolute;overflow:hidden; visibility:visible">
<div id="DivA_bd" style="height:16px; padding:0px; border:1px">
  <table id="DivA_bbt" cellpadding="0" cellspacing="0" border="0" width="396">
   <tr>
    <td>
     <div id="DivA_h" style="height:14px; font: bold 12px sans-serif; color:#FFFFFF"> Move</div>
    </td>
    <td align="right">
     <a onmousedown="document.getElementById('DivA_s').style.display='none'; document.getElementById('DivA_b').style.display='none';return false">
      <img src="close.gif" border="0" height="15" width="15">
     </a>
    </td>
   </tr>
  </table>
</div>
<div id="DivA_ov">
  asdkjfalsjf
</div>
</div>