关闭

JavaScript 弹出一个可移动的框

标签: javascriptfunctionnullieborderdiv
1976人阅读 评论(1) 收藏 举报

<script language="javascript">
/*Title:JavaScript 弹出一个可移动的框
 *Author: Alvin
 *Date: 2006-5-31
 *Description: JavaScript 弹出一个可移动的框
 *Environment: WinXP sp2,Ie6,IE7.FireFox
 *KeyWord: JavaScript 弹出一个可移动的框
 */
 
 var IE5=(document.getElementById && document.all)? true : false;
 var W3C=(document.getElementById)? true: false;
 var currIDb=null, currIDs=null, xoff=0, yoff=0; zctr=0; totz=0;
 function trackmouse(evt){
  if((currIDb!=null) && (currIDs!=null)){
   var x=(IE5)? event.clientX+document.body.scrollLeft : evt.pageX;
   var y=(IE5)? event.clientY+document.body.scrollTop : evt.pageY;
   currIDb.style.left=x+xoff+'px';
   currIDs.style.left=x+xoff+10+'px';
   currIDb.style.top=y+yoff+'px';
   currIDs.style.top=y+yoff+10+'px';
   return false;
  }}

  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_s" style="position:absolute; background-color:#800000; filter:alpha(opacity=50); visibility:visible">
</div>

<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>

<script language="javascript">
createPopup( 'DivA', 600,300,true,200,100,'#FF9D6F','#FFF000','#FFF000');
</script>

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:119470次
    • 积分:1672
    • 等级:
    • 排名:千里之外
    • 原创:43篇
    • 转载:19篇
    • 译文:0篇
    • 评论:28条
    文章分类
    最新评论