Content Focus / Shadow

Demo how to have an element show up above an overlay while everything else is hidden under. The overlay also shows items specific to it.

by JThomas

HTML

<div id="overlay" class="hide">
    <div id="overlay-content">
        <input type="textbox" />
        <input type="textbox" />
        <input type="textbox" />
    </div>
</div>
<div id="main-content">
    <div id="some-content" class="highlight">
         <h3>CLICK ME!</h3>

    </div>
</div>

CSS

body {
    overflow: hidden;
}
.hide {
    display: none;
}
.show {
    display: block;
}
.highlight {
    z-index: 1000;
    position: relative;
    background-color: #fff;
    border: 1px solid #000;
    width: 200px;
    height: 300px;
}
#overlay {
    position: absolute;
    height: 100%;
    width: 100%;
    background-color: #000;
    opacity: 0.8;
    filter: alpha(opacity=80);
}
#overlay-content {
    position: relative;
    left: 205px;
}
#main-content {
    cursor: pointer;
}

JavaScript

var content = document.getElementById("some-content");
var overlay = document.getElementById("overlay");

content.onclick = function () {
    overlay.className = "show";
};

overlay.onclick = function (e) {
    if (e.target.id == "overlay") {
        overlay.className = "hide";
    }
};