如何在调用加载器（loader）时将整个页面置灰？

要实现页面背景置灰，只需新增一个全屏遮罩层，和加载图标配合显示即可，具体步骤如下：

1. 修改HTML结构 #

在#loader同级添加遮罩层元素：

<div id="loader-overlay"></div>
<div id="loader"></div>

2. 补充遮罩层CSS样式 #

在现有CSS基础上添加以下代码，让遮罩层覆盖整个页面并呈现半透明灰色：

#loader-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* 半透明灰色，可按需调整透明度 */
    z-index: 0; /* 层级低于加载图标，确保图标悬浮在遮罩上方 */
    display: none; /* 默认隐藏 */
}

/* 保留你原有的加载图标及动画样式 */
#loader {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 1;
    width: 120px;
    height: 120px;
    margin: -76px 0 0 -76px;
    border: 16px solid #f3f3f3;
    border-radius: 50%;
    border-top: 16px solid #3498db;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

3. 更新jQuery代码，同步控制遮罩层 #

在Ajax请求的开始/结束钩子中，同时控制遮罩层的显示与隐藏：

// Ajax开始时显示加载图标和遮罩层
$(document).ajaxStart(function() {
    $("#loader").show();
    $("#loader-overlay").show();
});

// Ajax结束时隐藏加载图标和遮罩层
$(document).ajaxStop(function() {
    $("#loader").hide();
    $("#loader-overlay").hide();
    $('#cancelBtn').removeAttr('hidden');
});

设置完成后，Ajax运行时页面会被半透明灰色遮罩覆盖，加载图标悬浮在上方，能更清晰地突出加载状态。

内容的提问来源于stack exchange，提问作者Merve Ozdogan