简单易用兼容IE6的Jquery遮盖层和弹框

最新推荐文章于 2017-12-14 15:34:09 发布

「已注销」

最新推荐文章于 2017-12-14 15:34:09 发布

阅读量1.2k

点赞数 1

分类专栏： jquery css 文章标签： jquery

jquery 同时被 2 个专栏收录

3 篇文章

订阅专栏

css

2 篇文章

订阅专栏

<!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; top:50%;left:50%;margin:-150px 0 0 -300px; 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(){
    $(".tanchu").show()
    $(".mask").css({ display: "block", height: $(document).height() });//获取高度，兼容IE6。如果不考虑IE6直接可以换成show()
    });
     $(".close").click(function(){
      $(".tanchu").hide()
      $(".mask").hide()
    });
  });
  </script>
</head>

<body>
 <div class="mask"></div>
    <p><input class="input" type="button" style="width:100px; height:30px;" /></p>
    <div class="tanchu">
       <a class="close">点我关闭层</a>
       <p>我是一个弹出层我是一个弹出层我是一个弹出层我是一个弹出层啊 我是一个弹出层</p>
     </div>
</body>
</html>