js弹出可拖动div

JS 弹出可拖动DIV  

2010-09-01 18:03:37|  分类: 学习总结 |  标签:js  弹出可移动div   |字号 订阅

 
 
文章分类:Web前端

      弹出DIV同时加入背景层实现方式很多,有原创也有借助js框架实现的,这些弹出的div功能都比较强悍,实际项目中有时候根本不需要如此般复杂操作,只 是弹出div进行数据展现或者是有效的操作而已,以上述的方式加入无疑让简单的东西复杂化,使程序执行效率降低。繁复的东西技术含量的确挺高(EXT), 同时不可避免会有其它方面的牺牲,以下弹出DIV简单高效,代码也很简洁,发出了一起看看,全部源代码如下,保存为html文件即可观看运行效果。

/**

 ** 源码部分开始

 **/

<html>
<head>
 <title>可拖动 DIV</title>
   <script type="text/javascript">
   function showProc(){
  message_box.style.visibility='visible';
  // 创建灰色背景层
  procbg = document.createElement("div");
  procbg.setAttribute("id","mybg");
  procbg.style.background = "#000";
  procbg.style.width = "100%";
  procbg.style.height = "100%";
  procbg.style.position = "absolute";
  procbg.style.top = "0";
  procbg.style.left = "0";
  procbg.style.zIndex = "500";
  procbg.style.opacity = "0.3";
  procbg.style.filter = "Alpha(opacity=30)";
  //背景层加入页面
  document.body.appendChild(procbg);
  document.body.style.overflow = "hidden";
 }
 //拖动
 function drag(obj){ 
     var s = obj.style; 
     var b = document.body;  
  var x = event.clientX + b.scrollLeft - s.pixelLeft;  
  var y = event.clientY + b.scrollTop - s.pixelTop;
   
  var m = function(){ 
   if(event.button == 1){ 
    s.pixelLeft = event.clientX + b.scrollLeft - x;  
    s.pixelTop = event.clientY + b.scrollTop - y;  
   }else {
    document.detachEvent("onmousemove", m);
   } 
  } 
  
  document.attachEvent("onmousemove", m) 
 
  if(!this.z)
   this.z = 999;  
  s.zIndex = ++this.z;  
  event.cancelBubble = true;  
 }
 
 function closeProc(){
  message_box.style.visibility='hidden';
  procbg.style.visibility = "hidden";
 }
   </script>
</head>

<body>
    <input type="button" value="弹出可拖动DIV" onclick="showProc();" /> 


  <div id="message_box" style="position:absolute;
           left:10%;top:10%;width:80%;height:80%;
           filter:dropshadow(color=#666666,offx=3,offy=3,positive=2);
           z-index:1000;
           visibility:hidden">
   <div id= "message" style="border:#036 solid; border-width:1 1 3 1;
         width:95%; height:95%;
         background:#fff; color:#036; font-size:12px; line-height:150%;">
    <!-- DIV弹出状态行:标题、关闭按钮 -->
    <div style="background:#666; height:5%;
       font-family:Verdana, Arial, Helvetica, sans-serif;
       font-size:12px; padding:3 5 0 5; color:#fff"
      onmousedown="drag(message_box);return false">
     <span style="display:inline;width:150px;position:absolute;font-size:200%">标 题项</span>
     <span onClick="closeProc();" style="float:right;display:inline;cursor:hand;font-size:200%">×</span>
    </div>
    具 体内容,可以是表格也可以是DIV
   </div><!-- message -->
  </div><!-- message_box -->
</body>
</html>

/**

 **源码部分结束

 **/

posted @ 2012-09-24 17:00  sungoody  阅读(244)  评论(0编辑  收藏  举报