简单的遮罩弹窗jquery代码

效果

点击这里
效果增强版的

代码

HTML结构

<div>点击这里</div>
 <div>效果增强版的</div>
 <div></div>
 <div>这里是正文内容</div>

CSS代码

.bg{display:none;position:fixed;width:100%;height:100%;background:#000;z-index:2;top:0;left:0;opacity:0.7;}
.content{display:none;width:500px;height:300px;position:fixed;top:50%;margin-top:-150px;background:#fff;z-index:3;left:50%;margin-left:-250px;}

JS代码

   $(function(){
		$('.click').click(function(){
			$('.bg').css({'display':'block'});
			$('.content').css({'display':'block'});
		});
		$('.bg').click(function(){
			//$('.bg').css({'display':'none'});
			//$('.content').css({'display':'none'});
		});
		$('.click1').click(function(){
			$('.bg').fadeIn(200);
			$('.content').fadeIn(400);
		});
		$('.bg').click(function(){
			$('.bg').fadeOut(200);
			$('.content').fadeOut(200);
		});
	});
神说:有代码的文章要有一个 Demo,于是就有了 Demo。 包养本人>>

关注我

我的微信公众号:前端开发博客,在后台回复以下关键字可以获取资源。

  • 回复「小抄」,领取Vue、JavaScript 和 WebComponent 小抄 PDF
  • 回复「Vue脑图」获取 Vue 相关脑图
  • 回复「思维图」获取 JavaScript 相关思维图
  • 回复「简历」获取简历制作建议
  • 回复「简历模板」获取精选的简历模板
  • 回复「加群」进入500人前端精英群
  • 回复「电子书」下载我整理的大量前端资源,含面试、Vue实战项目、CSS和JavaScript电子书等。
  • 回复「知识点」下载高清JavaScript知识点图谱

每日分享有用的前端开发知识,加我微信:caibaojian89 交流