jQuery实现带遮罩层的消息框滑入滑出效果

首先，使用一个遮罩层来遮住整个页面，在遮罩层上显示一个消息框，消息框还能够被关闭，最后使用jQuery使得消息框从页面顶部滑下，实现的效果以下：

遮罩层的样式以下：

.overlay{ background:transparent url(images/overlay.png) repeat top left; position:fixed; top:0px; bottom:0px; left:0px; right:0px; z-index:100; }

样式说明了不论在哪一种浏览器中，遮罩层上、右、下左边距都为0，保证了真正的遮罩。而position:fixed保存了当出现滚动条时，遮罩的彻底，position:absolute不能知足这个要求，有兴趣的能够试试。过多的不解释了，不理解的也能够看看CSS遮罩层这篇文章。

下边样式用来显示消息框：

.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:  1px 5px #333; -webkit-box-shadow:  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'); }); }); });

这里boxclose关闭事件的动画完成时，将遮罩层也快速的关闭。