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隐藏显示整个元素。

除了div之外，如何在网页上调暗一切 - 引起注意

1 个答案: