弹窗

最新推荐文章于 2025-04-26 19:20:23 发布

原创最新推荐文章于 2025-04-26 19:20:23 发布 · 240 阅读

0 ·

CC 4.0 BY-SA版权

常用效果专栏收录该内容

9 篇文章

订阅专栏

本文介绍了一种使用jQuery实现的简单弹出层效果。通过HTML、CSS和jQuery代码结合，可以轻松创建具备淡入淡出及滑动效果的弹窗。用户点击页面上的链接即可触发弹窗显示，再次点击弹窗内的关闭按钮则会隐藏该弹窗。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery弹出层效果</title>
<link rel="stylesheet" href="css/theme.css" media="all">
<style>
/*弹出框*/
*{ margin:0; padding:0}
.view_more{ font-size:20px; color:#E4007F; margin-left:30px;-font-family:"微软雅黑"}
.doc-mask{z-index: 9998;position:fixed;top:0;left:0;width:100%;height:100%;background:#000;opacity:0.4;filter:alpha(opacity=40);display:none; }
.doc-popover{z-index:9999;position:fixed;top:50%;left:50%;width:430px;margin:-180px 0 0 -215px;border:5px solid #e5e5e5;background:#fff;display:none;}
.doc-poptit{padding:12px; height:20px;position: relative;}
.doc-poptit .close{float:right;color:#999;padding:5px;margin:-2px -5px -5px;text-shadow:0 1px 0 #ddd; font-size:16px}
.doc-poptit .close:hover{color:#444;}
.doc-popbod{padding:10px 50px;color:#666;}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
<script>
jQuery(document).ready(function($) {
$('.view_more').click(function(){
$('.doc-mask').fadeIn(0);
$('.doc-popover').slideDown(0);
})
$('.doc-poptit .close').click(function(){
$('.doc-mask').fadeOut(0);
$('.doc-popover').slideUp(0);
})

})
</script>
</head>
<body>
<!-- 弹出层代码开始-->
<div> <a class="view_more" href="javascript:;">点我</a> </div>
<div class="doc-popover">
<div class="doc-poptit"> <a href="javascript:;" title="关闭" class="close">x</a> </div>
<div class="doc-popbod">
内容区域
</div>
</div>
<div class="doc-mask"></div>
<!--弹出层代码结束 -->
</body>
</html>