How To Dim Everything On A Webpage Apart From A Div - To Bring Attention

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 d

Solution 1:

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 blackheight: 100vh;                 // height of the viewportposition: fixed;               // always cover the screenwidth: 100%;                   // width of the viewportz-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.