Question:

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); }

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

My current form

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

My sign in button

<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 }

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