点击动画方式弹出带有灰色半透明背景div层
本章节分享一段代码实例,它实现了点击按钮弹出一个带有灰色半透明北京的div层效果。
并且弹出过程具有动画效果,从右上角飞入的感觉,代码实例如下:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> <style> *{ margin:0; padding:0; list-style-type:none; } a{text-decoration:none;} .showdiv{ color:#fff; padding:8px 15px; background:#09F; text-align:center; display:block; width:150px; margin:100px auto; } .showbox{ width:0px; height:0px; display:none; position:absolute; right:0; top:0; z-index:100; border:1px #8FA4F5 solid; padding:1px; background:#fff; } .showbox h2{ height:25px; font-size:14px; background-color:#3366cc; position:relative; padding-left:10px; line-height:25px; color:#fff; } .showbox h2 a{ position:absolute; right:5px; top:0; font-size:12px; color:#fff; } .showbox .mainlist{padding:10px;} .showbox .mainlist p{ font:normal 14px/2 'microsoft yahei'; text-indent:2em; color:#333; padding-top:5px; } #zhezhao{ background-color:#666; position:absolute; z-index:99; left:0; top:0; display:none; width:100%; height:100%; opacity:0.5; filter: alpha(opacity=50); -moz-opacity: 0.5; } </style> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script type="text/javascript"> $(document).ready(function () { $(".showdiv").click(function () { var box = 300; var th = $(window).scrollTop() + $(window).height() / 1.6 - box; var h = document.body.clientHeight; var rw = $(window).width() / 2 - box; $(".showbox").animate({ top: th, opacity: 'show', width: 600, height: 340, right: rw }, 500); $("#zhezhao").css({ display: "block", height: $(document).height() }); return false; }); $(".showbox .close").click(function () { $(this).parents(".showbox").animate({ top: 0, opacity: 'hide', width: 0, height: 0, right: 0 }, 500); $("#zhezhao").css("display", "none"); }); }); </script> </head> <body> <a class="showdiv" href="#">点击我弹出浮层</a> <div class="showbox"> <h2>前端教程网<a class="close" href="#">关闭</a></h2> <div class="mainlist"> <p></p> </div> </div> <div id="zhezhao"></div> </body> </html>
上面的代码实现了我们的要求,下面介绍一下它的实现过程。
一.代码注释:
(1).$(document).ready(function () {}),当文档结构完全加载完毕再去执行函数中的代码。
(2).$(".showdiv").click(function () {}),为class属性值为showdiv的元素注册click事件处理函数。
(3).var box = 300,声明一个变量并赋值为300。
(4).var th = $(window).scrollTop() + $(window).height() / 1.6 - box,这个代码是计算出弹出层top值。 $(window).scrollTop()获取的是窗口中的内容向上滚动的尺寸,$(window).height() 获取的是浏览器客户区的高度。这个top值没有特别的讲究,就是随意设置的,不要太难看就可以。
(5).var h = document.body.clientHeight,获取body的高度。
(6).var rw = $(window).width() / 2 - box,获取弹出层的left属性值,因为弹出层的宽度是600,而box值是300,所以也就是将其设置为水平居中显示。
(7).$(".showbox").animate({
top: th,
opacity: 'show',
width: 600,
height: 340,
right: rw
}, 500)
以动画的方式展现弹出层,因为弹出层默认是隐藏并且位于页面的左上角,所以此代码就实现了让它从左上角飞入的效果。
(8).$("#zhezhao").css({
display: "block",
height: $(document).height()
}),显示遮罩层。
(9).$(".showbox .close").click(function () {
$(this).parents(".showbox").animate({
top: 0,
opacity: 'hide',
width: 0,
height: 0,
right: 0
}, 500);
$("#zhezhao").css("display", "none");
}),原理一回事,和上面做相反的工作。
二.相关阅读:
(1).scrollTop()可以参阅jQuery scrollTop()一章节。
(2).clientHeight可以参阅clientHeight一章节。
(3).animate()可以参阅jQuery animate()一章节。
(4).css()可以参阅jQuery css()方法一章节。
(5).parents()可以参阅jQuery parents()一章节。