javascript - 如何使网页上除 div 之外的所有内容变暗 - 以引起注意

Question

目前关于这个主题的所有已经提出的问题都没有用，因此我要问一个新问题。我有一个登录页面，我有一个登录按钮，单击该按钮会在使用以下函数显示加载 gif 2 秒后显示隐藏的 div。

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

}

我对如何在单击登录按钮后使该 div 后面的所有内容变暗感到困惑。

我现在的状态

<form action="" method="POST" id="hello" onsubmit="showDiv(); return 
false;">

我的登录按钮

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

Answer 1

听起来您正在尝试制作模态。调暗页面上的所有内容:

在页面上创建一个元素

<div class="covering-panel">
    // form goes here
</div>

并给它一个固定的位置，高度和宽度覆盖屏幕。

.covering-panel {
    background: rgba(0,0,0, 0.6);  // opaque black
    height: 100vh;                 // height of the viewport
    position: fixed;               // always cover the screen
    width: 100%;                   // width of the viewport
    z-index: 30;                   // stay on top of other elements
}

将表单放入 .covering-panel div 并使用 javascript 隐藏显示整个元素。