当前位置:jQuery学习 > jQuery > jQuery实现带遮罩层的消息框滑入滑出效果

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

时间:2010-10-30QQ群:116983258

记得前些天和大家分享过一篇CSS遮罩层的代码,今天让我们看看使用CSS结合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: 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');
        });
    });
});

这里boxclose关闭事件的动画完成时,将遮罩层也快速的关闭。如果你还对jQuery动画不熟悉,可以看看当文本框获得焦点时使输入区域变大这篇文章。本篇就到这里,使用css overlay并配合一些jQuery特效,能很好的提高用户体验,赶快试试吧!

作者:jQuery学习
除非注明,jQuery学习网文章均为原创,转载时必须以链接形式标明本文地址。
本文地址:http://www.jquery001.com/jquery-overlay-with-slide-out-box.html

大家说了些什么

  1. 1. paysent 2010-11-17 15:37

    Demo里面 class="box" id="box"这个DIV刚开始是如何隐藏的呢?没有设置style="display:none;"啊

  2. 2. paysent 2010-11-17 15:42

    刚看到了,呵呵,TOP:-500,没有隐藏

    • 朋友的你 2010-11-17 19:20

      @paysent 是的,是从上边掉下来的么。^_^

  3. 3. crazyx 2012-02-09 17:10

    要兼容老浏览器就要多写js了

所有话题