简单的用jQuery做遮罩效果

最新推荐文章于 2025-09-12 16:56:45 发布

转载最新推荐文章于 2025-09-12 16:56:45 发布 · 54 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/zhangyy520/p/6905160.html

文章标签：

#javascript #ViewUI

本文介绍如何使用jQuery快速实现网页遮罩层效果。通过简单的HTML结构配合jQuery的slideToggle方法，可以在点击指定元素时显示或隐藏带有透明度的黑色遮罩层。这种方法适用于需要暂时禁用页面交互的场景。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>用jquery做遮罩</title>
    <style>
        .all{
            width:100%;
            height:500px;
            background: red;
            position: relative;
        }
        .mask {
            width:100%;
            height:500px;
            position: absolute;
            display: none;
            background:rgba(0,0,0,.5);
            z-index:1000;
        }
    </style>
</head>
<body>
    <div class="all">
        <div id="mask" class="mask"></div>
    </div>
</body>
<script src="jquery-1.11.3.min.js"></script>
<script>
    (function(){
        $(function(){
            $(".all").click(function () {
                $("#mask").slideToggle(1000);
            });
        });
    })()
</script>
</html>
jQuery的代码一点点，是不是简单啊！！！哈哈哈