如何为对话框创建背景？

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

这是一篇很棒的文章和相关片段：

为什么我们需要元素而可以使用库？

对话框是非常常见的 UI 组件，因此 Web 平台原生支持它们是有意义的。这样你就不需要一个库来弹出一个对话框。

<dialog>也非常适合可访问性。浏览器了解什么元素是对话框以及它是否是模态的，因此屏幕阅读器等辅助功能技术可以知道哪些内容应该是非交互式的。

此外，模式对话框被推送到称为“顶层”的有序堆栈上，呈现在所有其他元素之上，无论它们的 z 索引如何。在复杂的网页中，依靠 z-index 将模式对话框置于顶部可能会很脆弱。例如，对话框可能会卡在低级堆叠上下文中，或者其他组件也可能会尝试位于顶部，或者可能会发生动态样式更改。

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>