使用`＆lt; dialog＆gt;`

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

使用`＆lt; dialog＆gt;`

它还不是首选解决方案，但请考虑<dialog>及其伪选择器::backdrop，它将执行您正在寻找的内容。

虽然它没有得到很好的支持但是有这种填充物：https://github.com/GoogleChrome/dialog-polyfill

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

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

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

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

如果将#dialog div包装在容器div中，则可以执行以下操作：

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;

}

有关演示，请参阅此Fiddle。

#dialog-container:before正在为此演示创建背景幕。

如何为对话框创建背景？

2 个答案:

使用`＆lt; dialog＆gt;`

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