.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');
});
});
});
作者:朋友的你