jQuery弹出层垂直居中效果

最新推荐文章于 2022-07-18 09:34:07 发布

原创最新推荐文章于 2022-07-18 09:34:07 发布 · 254 阅读

0 ·

CC 4.0 BY-SA版权

div+css 同时被 2 个专栏收录

89 篇文章

订阅专栏

jquery

39 篇文章

订阅专栏

本文介绍了一个使用jQuery实现的弹出层垂直居中显示的效果。通过简单的HTML结构和CSS样式，结合jQuery的事件处理，使得点击指定元素时能够显示一个居中的弹出窗口，并附带关闭按钮。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
 <head> 
  <meta http-equiv="Content-type" content="text/html; charset=UTF-8" /> 
  <title>jQuery弹出层垂直居中效果</title> 
  <style>
*{ margin:0; padding:0; list-style:none;}
img{ border:0; width: 100%; }
.imgs{ width:200px; height:200px; cursor:pointer;}

.zzsc{position:absolute;left: 10%;right:10%;top:10%;bottom:10%;text-align: center;font-size: 0; z-index:9; display:none;}

.content{display: inline-block; *display: inline; *zoom:1;	vertical-align: middle;position: relative;background:#fff; padding:5px; bottom: 10.5%;}
.content>b{ position: absolute; right: -32px; top: 0; font-size: 20px; display: block; width: 32px; height: 32px; background:#fff; color: #333; cursor: pointer; }
.content img{ max-width: 100%; width: auto; }

.content_mark{ width:100%; height:100%; position:fixed; left:0; top:0; z-index:5; background:#000; opacity:0.5;filter:alpha(opacity=50); display:none;}
</style> 
 </head> 
 <body> 
  <div class="imgs"> 
   <img src="images/zzsc.jpg" /> 
  </div> 
  <!-- 弹出层部分begin --> 
  <div class="zzsc"> 
   <div class="content">
    <b>&times;</b>
    <img src="images/11eb09363f6e459c08d4a6b81c9d5c4b.jpg" />
   </div> 
  </div> 
  <div class="content_mark"></div> 
  <!-- 弹出层部分end --> 
  <script src="js/jquery.min.js"></script> 
  <script>
$(function(){
	$('.imgs').click(function(){
		$('.zzsc').show(0);
		$('.content_mark').show(0);
	});
	$('.content_mark,.content>b').click(function(){
		$('.zzsc').hide(0);
		$('.content_mark').hide(0);
	});
});
</script>  
 </body>
</html>