How to create a backdrop for a dialog?

Issue

I created a dialog:

<div id="dialog">
    <div id="start_conditions_scroll">
        <p>Conditions</p>
        My Conditions
    </div>
    <button id="close" class="button" onclick="dialog()">Close</button>
</div>

The css:

#dialog {
    background: white;
    position: absolute;
    left: 25%;
    top: 25%;
    width: 50%;
    height: 50%;
    border: 1px solid rgba(0, 0, 0, 0.3);
    border-radius: 6px;
    box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
    text-align: center;
    z-index: 1000;
    visibility: hidden;
}

The javascript:

$(document).ready(function () {
    showStart();

    document.querySelector("#show").onclick = function () {
        dialog();
    };

    document.querySelector("#show_2").onclick = function () {
        dialog();
    };
});

function dialog() {
    element = document.getElementById("dialog");
    element.style.visibility = (element.style.visibility == "visible") ? "hidden" : "visible";
}

How can I create a backdrop for that dialog? I want to create something like an overlay over the background.

Solution

If you wrap your #dialog div in a container div you could do something like this:

HTML

<div id="dialog-container">
    <div id="dialog">
        <div id="start_conditions_scroll">
            <p>Conditions</p>My Conditions</div>
        <button id="close" class="button" onclick="dialog()">Close</button>
    </div>
</div>

CSS

#dialog-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    visibility: hidden;
}
#dialog-container:before {
    content:"";
    background: rgba(0, 0, 0, .8);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
}
#dialog {
    background: white;
    position: absolute;
    left: 25%;
    top: 25%;
    width: 50%;
    height: 50%;
    border: 1px solid rgba(0, 0, 0, 0.3);
    border-radius: 6px;
    box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
    text-align: center;
    z-index: 1000;

}

See this Fiddle for a demo.

The #dialog-container:before is creating you backdrop in this demo.

Answered By - zgood