`
贾明海刚
  • 浏览: 22278 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

带遮罩的div弹出层 js+css

CSSJavaScriptHTML 
阅读更多

 

今天在项目中用到了一个很好的div弹出层效果，拿出来和大家一起分享！

 

<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:pointer;font-size:200%">×</span>

    </div>

    具体内容，可以是表格也可以是DIV

   </div><!-- message -->

  </div><!-- message_box -->

</body>

</html>


分享到：
| WEB开发中的问题，SVN+MyEclipse时出现的 ...
评论
1 楼 x5456078 2012-05-15  
好是好，可惜就只能在IE上运行
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics