遮罩层效果兼容ie firefox jQuery遮罩层弹出层带关闭按钮

最新推荐文章于 2021-11-26 17:43:46 发布

阿聪世家

最新推荐文章于 2021-11-26 17:43:46 发布

阅读量3.7k

点赞数 2

分类专栏：网站常用jquery效果文章标签： jquery 弹出层遮罩

本文链接：https://blog.csdn.net/congcong875/article/details/8669030

版权

网站常用jquery效果专栏收录该内容

52 篇文章 0 订阅

订阅专栏

今天写了一个jQuery遮罩层的效果，当然网上也有很多类似的效果及插件，但是大多数看上去很复杂，我只要最简单最实用的，最少的代码达到最多的效果，欢迎各位同志围观。。

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

阿聪世家

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
遮罩层效果兼容ie firefox jQuery遮罩层弹出层带关闭按钮

今天写了一个jQuery遮罩层的效果，当然网上也有很多类似的效果及插件，但是大多数看上去很复杂，我只要最简单最实用的，最少的代码达到最多的效果，欢迎各位同志围观。。遮罩层效果兼容ie firefox jQuery遮罩层 .mask{ display:none; position:absolute;top:0;left:0;width:100%;
复制链接

扫一扫