JavaScript 弹出一个可移动的框

原创 2006年05月31日 12:01:00

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

jquery封装了一个简洁轻巧的可拖动可自定义样式的纯div+css带遮罩层的仿模态弹出框

最近封装上瘾,想起以前做的一个轻巧的弹出框,是样式和脚本分离的,于是重新封装了一下,把样式标签统一到js里了。 里面还有一些问题,但不影响使用,有兴趣的同学,可以参考完善下,有好的建议,请不吝赐教。...
  • foren_whb
  • foren_whb
  • 2015年05月29日 09:58
  • 4392

利用javaScript实现鼠标在文字上悬浮时弹出悬浮层

在人人,CSDN等一些网站,当鼠标在某个东西上悬浮时,会弹出一个悬浮层,鼠标移开悬浮层消失。比如说CSDN的通知(应该是进入写新文章的页面后页面上方的那个铃铛),具体是什么实现的呢?上代码: ...
  • u012116457
  • u012116457
  • 2015年05月28日 17:08
  • 7063

鼠标移入就显示弹框,移出弹框就消失

html: 菜单 ...
  • java_zhaoyanli
  • java_zhaoyanli
  • 2016年08月08日 13:14
  • 1539

一个精美的javascript弹出层提示框,支持任意浏览器,基于jquery,定位准确!

  • 2010年08月22日 23:26
  • 8KB
  • 下载

js javascript图层的弹出 背景变灰 和js图层的移动 及相关资料

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> body ...
  • yhh345814509
  • yhh345814509
  • 2012年07月10日 12:58
  • 924

如何在网页上弹出一个对话框显示一些内容javascript

1.下载并引用js文件 dialog.js 及其css文件dialog.css 2. '.$depval['KOSTL'].''.$depval['STEXT'].'详情 修改 删除 3....
  • charliefromkansas
  • charliefromkansas
  • 2016年05月12日 08:29
  • 695

可移动弹出框思路实现2

  • 2017年12月14日 15:29
  • 3.77MB
  • 下载

手机移动端的分享弹出框

  • 2017年01月13日 17:27
  • 71KB
  • 下载

可移动弹出框思路实现

  • 2017年12月14日 15:27
  • 3.96MB
  • 下载

同时弹出两个对话框,透明对话框,移动窗口

  • 2010年12月04日 10:13
  • 3.61MB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JavaScript 弹出一个可移动的框
举报原因:
原因补充:

(最多只允许输入30个字)