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

最新推荐文章于 2021-05-31 04:06:00 发布

iteye_2903

最新推荐文章于 2021-05-31 04:06:00 发布

阅读量447

点赞数

CC 4.0 BY-SA版权

分类专栏： jQuery 文章标签： javascript 前端 ViewUI

本文链接：https://blog.youkuaiyun.com/iteye_2903/article/details/82437994

jQuery 专栏收录该内容

39 篇文章

订阅专栏

本文介绍如何使用CSS和jQuery实现消息框的动画效果，包括遮罩层和消息框的显示与隐藏，并提供了详细的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >


.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学习