如何将网页上除了div以外的所有内容变暗 - 以引起注意 [英] How to dim everything on a webpage apart from a div - to bring attention

问题描述

目前没有任何关于此主题的已提问问题有用，因此我正在问一个新问题。我有一个登录页面，并且我有一个登录按钮，点击后显示一个div，在使用以下函数显示加载gif 2秒后隐藏。

Currently none of the already asked questions on this topic are of use, therefore I am asking a new one. I have a log in page, and I have a sign in button, which on click shows a div from being hidden after showing a loading gif for 2 seconds using the following function.

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点击登录按钮后。

I am stuck on how I would go about dimming everything behind this div after clicking the sign in button.

我的当前表单

<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()">

推荐答案

听起来就像是在试图制作一个模式。隐藏页面上的所有内容：

Sounds like you're trying to make a modal. To dim everything on the page:

在页面上创建一个元素

Create an element on the page

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

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

and give it a fixed position, where the height and width cover the screen.

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

Put the form inside the .covering-panel div and use javascript to hide show the whole element.

这篇关于如何将网页上除了div以外的所有内容变暗 - 以引起注意的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！