弹窗渐隐渐出效果

最新推荐文章于 2023-04-14 14:55:02 发布

tianxuezhi_s

最新推荐文章于 2023-04-14 14:55:02 发布

阅读量1.9k

点赞数

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

本文链接：https://blog.csdn.net/cdream_me/article/details/20384829

版权

jQuery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

经常看到有各种各样的弹窗，一直不知道是怎么回事，查了查，原理挺简单的。

先贴出html/css代码

.back {
	display:none;
	position:absolute;
	top:0;
	left:0;
	height:100%;
	width:100%;
	background:black;
	z-index:1000;
	cursor:pointer;
	opacity:0.6;
	filter:alpha(opacity=60);
}
.box {
	position:absolute;
	left:25%; 
	top:25%;
	width:500px;
	height:auto; 
	display:block; 
	z-index:8030; 
	display: none;
}
.skin{
	position:relative; 
	padding:15px; 
	background:#f9f9f9;
	border:1px solid #eee; 
	color:#444; 
	height:300px;
	width:485px;
	}
.close {
	position: absolute; 
	top:-18px; 
	right:-18px;
	width: 36px;
	height: 36px;
	cursor: pointer;
	z-index: 8040;
	background-image: url(fancybox_sprite.png);
}

<body>
<button id="open">Open</button>

<div class="back"></div>

<div class="box">
 	<div class="skin">
 		<div class="close"></div>  <!--图片按钮及背景取自42qu.com-->
 	</div>
</div>

</body>

代码很简单，主要的是一个按钮，用于添加弹出窗事件，在实际应用中可以其他任何元素。另外就是两层div，最开始两个div都是隐藏的，弹窗出来后，.back颜色为透明黑色，box为弹窗，另外还有个close关闭按钮。最终效果如下图

下面我们来用jQuery来实现效果。

	 $(function() {
	 	$('#open').click(show);
	 	$('.back, .close').click(hide);

	 	function show() {
	 		$('.back').fadeIn(700);
	 		$('.box').fadeIn('normal');
	 	};

	 	function hide() {
	 		$('.back').fadeOut(700);
	 		$('.box').fadeOut('normal');
	 	}

	 });

这样一个简单的渐隐渐出弹窗就实现了，点击close或黑色透明背景弹出都将关闭。

还有一个效果我没实现，点击这篇文章的品论按钮，弹出弹出时，它的长宽是从中间向两边延伸，消失时也是窗宽向中间缩小直到消失。一直没找到答案，希望你能告诉我

tianxuezhi_s

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
弹窗渐隐渐出效果

经常看到有各种各样的弹窗，一直不知道是怎么回事，查了查，原理挺简单的。先贴出html/css代码.back { display:none; position:absolute; top:0; left:0; height:100%; width:100%; background:black; z-index:1000; cursor:pointer; opacity:0
复制链接

扫一扫