Question

<dialog>标记在使用showModal()打开时，会在禁用页面上的所有其他元素时显示其与结束标记之间的元素。我的问题是：是否有可能为特定元素覆盖此行为？例如：

HTML：

<div id="container">
  <dialog id="myDialog">
    <button id="close" type="reset">Close</button>
    <button id="create">Add Element</button>
  </dialog>
</div>

<menu>
  <button id="openButton">Open Dialog</button>
</menu>

CSS：

.new-element {
  width: 50px;
  height: 50px;
  border: 3px solid black;
  background-color: blue;
  position: fixed;
  top: 50%;
}

JS：

const container = document.getElementById('container');
const openButton = document.getElementById('openButton');
const closeButton = document.getElementById('close');
const createButton = document.getElementById('create');
const myDialog = document.getElementById('myDialog');

openButton.addEventListener('click', function() {
  myDialog.showModal();
});

closeButton.addEventListener('click', function() {
  myDialog.close();
});

createButton.addEventListener('click', function() {
  const div = document.createElement('div');
  div.classList.add('new-element')
  container.appendChild(div);
});

在JSFiddle中：https://jsfiddle.net/y7bkxvd4/

我想找到一种方法将蓝色方块放在对话框的顶部。我意识到将新div添加到对话框本身会容易得多，但是在溢出是一个问题和使用使用react-portal的模块的情况下我遇到了这个问题。如果它不可能，很酷，我可以支持它。但如果是的话，我想知道。

z-index显然没有效果。

Answer 1

<dialog>元素被添加到＆＃39;顶层＆＃39;具有自己的堆叠顺序的dom（z-index不影响它 - 它严格按添加元素的顺序设置）。我不相信您可以手动将元素添加到此顶层，它可以在showModal（）等函数中完成。您可以在https://fullscreen.spec.whatwg.org/#new-stacking-layer找到更多信息，但因为该功能尚未普遍支持其难以找到的文档。例如：

要从顶层移除元素，请从顶层移除元素。

真有帮助..

一对夫妇的解决方法：

将添加的元素更改为对话框，并在添加元素时调用.showModal()。这种方法的问题是.showModal()使该元素之外的所有元素都不可用于用户交互。这意味着您的蓝色框位于顶部，但这也意味着您无法点击＆＃34;关闭＆＃34;或＆＃34;添加元素＆＃34;在另一种模式上。（注意：您还会注意到＆＃34;关闭/添加元素＆＃34;对话框显示为灰色 - 您可以通过更改.new-element::backdrop{...}来覆盖它，但它仍然无法更改事实上，您无法点击＆＃34;关闭＆＃34;或＆＃34;添加元素＆＃34;）示例here （删除背景）

将添加的元素更改为对话框，在添加元素时调用.show()，然后更改“打开对话框”的点击事件。到.show()而不是.showModal。这样您也可以点击蓝色框（即使它位于顶部＆＃39;），但它也允许您点击页面上的任何位置（有点击败模态的目的）。 ::backdrop伪元素也不可用，因为您没有使用.showModal如果您采用这种方法，则需要将蓝色框关闭到＆＃34;关闭＆＃34;点击事件处理程序示例here

我的建议是使用一个插件用于模态（例如Bootstrap＆＃39; s）或使用你想要的功能（使用Javascript）自己创建。对话是技术上的体验技术，所以它不容易尝试获得你想要的开箱即用的行为。 This可能会尽可能接近，但您可以通过添加自己的＆＃34;背景＆＃34;来改善它。

是否可以将div放在不是其父级的<dialog>标记之上？

1 个答案: