jquery屏蔽层

基础概念

jQuery 屏蔽层通常是指使用 jQuery 创建一个覆盖在页面上的半透明层，用于阻止用户与页面的其他部分进行交互，常用于弹出窗口、加载提示、确认对话框等场景。

类型

固定位置屏蔽层：屏蔽层固定在页面的某个位置，不会随页面滚动而移动。
全屏屏蔽层：屏蔽层覆盖整个页面，通常用于阻止用户在加载过程中进行其他操作。
弹出窗口屏蔽层：在弹出窗口上方添加一个屏蔽层，防止用户与背景页面交互。

应用场景

加载提示：在数据加载过程中显示一个半透明的屏蔽层，提示用户正在加载。
弹出窗口：在弹出确认对话框或信息提示框时，使用屏蔽层阻止用户与背景页面交互。
表单验证：在用户提交表单前进行验证，验证失败时显示屏蔽层并提示错误信息。

示例代码

以下是一个简单的 jQuery 屏蔽层的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery 屏蔽层示例</title>
    <style>
        #overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            z-index: 9999;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <button id="showOverlay">显示屏蔽层</button>
    <div id="overlay"></div>

    <script>
        $(document).ready(function() {
            $('#showOverlay').click(function() {
                $('#overlay').fadeIn();
            });

            $('#overlay').click(function() {
                $(this).fadeOut();
            });
        });
    </script>
</body>
</html>