简单的遮罩弹窗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。 包养本人>>

「五年博客,如果觉得我的文章对您有用,请帮助本站成长」

订阅周报 关注微博

原创文章:简单的遮罩弹窗jquery代码 ,未经许可,禁止转载,©版权所有
原文出处:前端开发博客 (http://caibaojian.com/673.html)

发表评论

请登录后发表评论: