点击按钮弹出遮罩层背景和居于屏幕中间的弹出窗口(结合阿聪世家适当修改)

来源:互联网 发布:windows vista和xp 编辑:程序博客网 时间:2024/03/29 08:48
<!doctype html>  
<html lang="en">  
<head>  
  <title>遮罩层效果 兼容ie firefox jQuery遮罩层</title>  
  <meta name="keywords"  content="你好好 " />  
  <meta name="description" content="好好好好好好好好"/>    
  <style type="text/css">  
    .mask{ display:none; position:absolute;top:0;left:0;width:100%;height:100%;background:#000;z-index:100;-moz-opacity:0.8;opacity:.80;filter:alpha(opacity=80);height:1000px;}  
    .tanchu{ width:600px;height:300px;position:absolute;  z-index:101; background:green;display:none;}  
    .close{ color:#fff; cursor:pointer;}  
  </style>  
  <script src="http://jt.875.cn/js/jquery.js" type="text/javascript"></script>  
  <!–[if ie]>  
  <script src="http://jt.875.cn/js/html5.js" type="text/javascript"></script>  
  <![endif]–>   
   
<script type="text/javascript">  
   $(function(){  
    $(".input").click(function(){  
       var top=($(window).height()-$(".tanchu").height())/2;
  var left=($(window).width()-$(".tanchu").width())/2;
  var scrollTop=$(document).scrollTop();
  var scrollLeft=$(document).scrollLeft();
   //alert(scrollLeft)
    $(".mask").css({ display: "block", height: $(document).height() });//获取高度,兼容IE6。如果不考虑IE6直接可以换成show()  
$(".tanchu").css({position : 'absolute', 'top' : top + scrollTop, left : left + scrollLeft}).show()  
    });  
     $(".close").click(function(){  
      $(".tanchu").hide()  
      $(".mask").hide()  
    });  
  });  
  </script>  
</head>  
  
<body>  
 <div class="mask"></div>  
    <p style="padding-top:2000px"><input class="input" type="button" style="width:100px; height:30px;" /></p>      
    <div class="tanchu">    
       <a class="close">点我关闭层</a>  
       <p>我是一个弹出层我是一个弹出层我是一个弹出层我是一个弹出层啊 我是一个弹出层</p>   
     </div>  
</body>  
</html>  
0 0
原创粉丝点击