How to create a backdrop for a dialog?

Question

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.

Answer 1

Use `<dialog>`

It's not yet the preferred solution but consider <dialog> along with its pseudo-selector ::backdrop which will do what you're looking for.

Although it's not well supported yet there is this polyfill: https://github.com/GoogleChrome/dialog-polyfill

Here is a great article and a pertinent snippet:

Why do we need element while it's possible using libraries?

Dialogs are such common UI components that it makes sense for the web platform to support them natively. This way you won't need a library just to popup a dialog.

<dialog> is also great for accessibility. The browser understands what element is a dialog and whether it's modal, so accessibility technology like screen readers can know which content should be non-interactive.

Also, modal dialogs are pushed on a well-ordered stack called the "top layer", rendered above all other elements, regardless of their z-index. Relying on z-index to put your modal dialog on top can be brittle in a complex web page. For example, the dialog may be stuck inside a low level stacking context, or other components may also try to be on top, or dynamic style changes may occur.

var dialog = document.querySelector('dialog')

document.querySelector('#show').onclick = function() {
  dialog.showModal();
};
document.querySelector('#close').onclick = function() {
  dialog.close();
};

dialog::backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.8);
}
dialog {
  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;
  width: 50%;
  height: 50%;
}

<button id="show">Show</button>
<dialog>
  <div>All your stuff</div>
  <button id="close">Close</button>
</dialog>

Answer 2

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.