Create a dimmed background on-click

css, html, javascript

Solution

Demos using jQuery or using bog-standard Javascript, both showing how you can toggle the element.

HTML You didn't say how you want to toggle this. Using a button?

<button onclick="dim();">Dim</button>
<div id="dimmer"></div>

but bear in mind the dimmer will go over the button

CSS

#dimmer
{
    background:#000;
    opacity:0.5;
    position:fixed; /* important to use fixed, not absolute */
    top:0;
    left:0;
    width:100%;
    height:100%;
    display:none;
    z-index:9999; /* may not be necessary */
}

N.B. Use `position: fixed` as 100% height is only the window height and if your document is larger, using `position: absolute` doesn't dim the whole document - you can scroll to see there are contents visible.

Javascript

function dim(bool)
{
    if (typeof bool=='undefined') bool=true; // so you can shorten dim(true) to dim()
    document.getElementById('dimmer').style.display=(bool?'block':'none');
}    

dim(true); // on
dim(false); // off

Problem

Hopefully not too vague. All I want to do is make the entire page go dim after clicking a link. I would imagine having `div style="height:100%; width=100%;"` with a high `z-index`. to cover the webpage. My question is toggling this div. I'm not sure what I should even use to accomplish this.

Original source