javascript - 如何为对话创建背景？

Question

我创建了一个对话框:

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

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;
}

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";
}

如何为该对话框创建背景？我想在背景上创建类似叠加层的东西。

Answer 1

使用`

`

这还不是首选解决方案，但请考虑 <dialog> 连同它的伪选择器 ::backdrop这将满足您的需求。

虽然它没有得到很好的支持，但还是有这个 polyfill:https://github.com/GoogleChrome/dialog-polyfill

这是一个great article和一个相关的片段:

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>