jQuery实现带遮罩层的消息框滑入滑出效果
.overlay{ background:transparent url(images/overlay.png) repeat top left; position:fixed; top:0px; bottom:0px; left:0px; right:0px; z-index:100; }
下边样式用来显示消息框:
.box{ position:fixed; top:-200px; left:30%; right:30%; background-color:#fff; color:#7F7F7F; padding:20px; border:2px solid #ccc; -moz-border-radius: 20px; -webkit-border-radius:20px; -khtml-border-radius:20px; -moz-box-shadow: 0 1px 5px #333; -webkit-box-shadow: 0 1px 5px #333; z-index:101; }
可见,重要的就是z-index:101,用来确保它在遮罩层之上,和CSS遮罩层那篇文章中提到的一样。关闭标签及其他元素的样式在这里就不一一介绍了,大家可以直接在Demo中查看到,你可以使用火狐的Firebug或Google浏览器中的开发者工具进行样式的在线查看。下边是实现动画效果的jQuery代码:
$(document).ready(function () { $('#activator').click(function () { $('#overlay').fadeIn('fast', function () { $('#box').animate({ 'top': '150px' }, 500); }); }); $('#boxclose').click(function () { $('#box').animate({ 'top': '-500px' }, 500, function () { $('#overlay').fadeOut('fast'); }); }); });
作者:朋友的你来源:jQuery学习
相关推荐
tztzyzyz 2020-07-05
87281248 2020-07-04
EdwardSiCong 2020-11-23
85477104 2020-11-17
hhanbj 2020-11-17
81427005 2020-11-11
seoppt 2020-09-13
honeyth 2020-09-13
WRITEFORSHARE 2020-09-13
84483065 2020-09-11
momode 2020-09-11
85477104 2020-08-15
83510998 2020-08-08
82550495 2020-08-03
tthappyer 2020-08-03
84901334 2020-07-28
tthappyer 2020-07-25
TONIYH 2020-07-22
tztzyzyz 2020-07-20