Javascript 如何在单击按钮时使页面上除div之外的所有内容变暗

我有一个使用该功能的登录按钮-

function showDiv() {
  document.getElementById('SteamLogin').style.display = "none";
  document.getElementById('loadingGif').style.display = "block";
  setTimeout(function() {
    document.getElementById('loadingGif').style.display = "none";
    document.getElementById('showme').style.display = "block";
  }, 2000);
}

显示正在加载的gif，然后取消隐藏一个div。我想知道我是否可以在这个函数的末尾添加一些东西，使显示的div后面的所有内容都变暗，以引起对弹出窗口的注意。目前任何关于这方面的问题对我来说都毫无用处，我已经尝试了所有的方法。如果有人有任何想法，我是非常新的CSS和HTML，所以任何帮助将感谢在简单的条款

更新：如果有人能帮忙的话，我还真的需要帮助

在显示加载的gif并取消隐藏div后，我想使页面变暗的按钮在这里，我想使div后面的所有内容变暗

<input class="btn_green_white_innerfade btn_medium" type="button" 
name="submit" id="userLogin" value="Sign in" width="104" height="25" 
border="0" tabindex="5" onclick="showDiv();">
            <div class="mainLoginLeftPanel_signin">

---

您可以使用选择器标记：not

*:not(div) {
color: black;
background-color: black;
//set any other that should be darkened
}

---

你可以像twitter那样创建一个div，它将填充整个页面：

<div class="PermalinkOverlay" id="permalink-overlay" style="display: block;">
      <!-- Content that will be showed whenever you want -->
</div>

---

所以，每当你想给你的站点提供一个更暗的透明背景时，你不能仅仅把显示块放在.PermalinkOverlay类中。要隐藏它，will可以将显示设置为“无”，就像您已经做的那样。

这在纯CSS中是可能的

我用它来达到预期的效果

至于覆盖或变暗，我使用一个空的锚标记和z索引堆叠来创建一个可点击的覆盖，它只在模式打开时显示。单击覆盖将关闭模式

modal还有一个单独的关闭按钮

当模态关闭时，它不会干扰主体内容

响应示例：

/*基本代码*/ .莫代尔{ 位置：固定； 排名：0； 右：0； 底部：0； 左：0； 不透明度：0； 指针事件：无； 背景：rgba0,0,0,8； 过渡：所有1秒； } .closeoverlay{ 排名：0； 右：0； 底部：0； 左：0； 不透明度：0； 显示：块； z指数：2； 位置：固定； 光标：指针； } .关闭按钮{ 颜色：红色； 文字装饰：无； 字体大小：30px； 保证金：0自动； 显示：表格； } .模态：目标{ 不透明度：1； 指针事件：自动； } .modal:target>.closeoverlay{ 显示：块； } .modal>div{ 宽度：300px； 高度：500px； 最大宽度：75vw； 最大高度：75vh； 文本对齐：居中； 位置：相对位置； 背景：dedede； z指数：3 } 包 .莫代尔{ 显示器：flex； 对齐项目：居中； 调整内容：中心 } .模态内容{ 溢出-y：自动 } /*演示绒毛*/ p{ 字体大小：20px； 显示：块； } 钮扣{ 利润率：2米0； 光标：指针； } .关闭按钮：悬停{ 颜色：白色； 光标：指针； } 杂乱 .模态内容p{ 利润率：2米自动； 填充：40px； 最大宽度：100%； 文本对齐：对齐； } .杂乱{ 宽度：400px } 熏火腿leberkas boudin pastrami香肠猪肉。汉堡潘切塔肉鹿肉熏牛肉。菲力牛排-恶魔岛博格多根萨拉米香肠，火腿-飞节-肩-猪里脊-牛里脊-下颚

培根益普生多洛艾美肩香肠臀部鹿肉凯文火腿萨拉米香肠。鹿肉意大利腊肠侧翼多纳堡多根、肩肉香肠猪、恶魔岛猪、短腰肉猪。熏牛肉腰肉肩、猪法兰克福牛肉条牛排香肠 意大利腊肠三尖。熏火腿leberkas boudin pastrami香肠猪肉。汉堡潘切塔肉鹿肉熏牛肉。菲力牛排，恶魔岛博格多根萨拉米香肠，火腿节肩猪里脊牛里脊肉，比卡尼亚肉酱，鸡腿肉馅。火鸡肩臀 球尖牛排turducken三尖biltong猪肉doner。Turducken leberkas chuck Filt mignon bresaola picanha球头猪磨碎圆柄。小腿肉里贝耶肥猪、卡皮科拉猪里脊三尖肉、比尔通火腿汉堡。

---

条状牛排猪排沙朗你可以在签到div后面有一个绝对定位的div，在其余元素的顶部有100%的宽度和高度，黑色背景有一点不透明，例如背景色：rgba0，0，0，0.8，然后淡入淡出。你没有问同样的问题吗？是的，但我没有成功

.PermalinkOverlay {
    background: rgba(0,0,0,0.5);
    bottom: 0;
    left: 0;
    overflow: auto;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 1010;
}