原生 HTML：对话框

有办法打开“

` 元素没有 JavaScript

#3567

AWS AI 直播！

多年来，如果你想创建一个模态dialog框，你需要创建一个div元素，将其隐藏，然后在用户执行特定操作时显示它。这种方法虽然简单易行，但可访问性很差，一个常见的错误是将元素留dialog在Tab键索引中，这意味着用户必须按Tab键才能浏览dialog模态框中的每个元素。

正如你可能已经猜到的，我将要写一篇关于原生dialog元素以及我如何使用它的文章。不出所料，截至撰写本文时，原生元素的支持并不尽如人意。

该dialog元素

我总是喜欢浏览 Mozilla 的开发者网站，以了解新功能，以下是他们的描述。

HTML元素表示对话框或其他交互式组件，例如检查器或窗口。<dialog>

好的，但这是什么意思呢？语法看起来很简单，我们来试一试。

<dialog open> Test dialog </dialog>

在支持的浏览器中显示效果如下。

好了，就到这里，感谢阅读……哦，还没完呢。我们需要和它交互dialog，但它一直显示在那里其实没什么用。Mozilla 提供了一个使用示例，但没有提供相关信息，所以我们再看看别的地方。

W3规范

如果拿不定主意，请查阅规范，果然，我们有 3 个与该对象交互的函数，dialog并且每个函数都有描述。

dialog.show([ anchor])
显示对话框元素。
如果提供了参数，则该参数指定元素将固定到的锚点。

dialog.showModal([ anchor])
显示对话框元素，并将其设置为最顶层的模态对话框。
如果提供了参数，则该参数指定元素将固定到的锚点。
此方法会应用 autofocus 属性。

dialog.close([ result])
关闭对话框元素。
如果提供了参数，则会返回一个值。

将此付诸实践

现在，这是我自己的实践方法，如果你认为不应该这样做，请告诉我。

使用label`s`，for你可以通过 ID 指向一个元素，并将标签链接到该元素。这启发我创建了一个data-modal-for`data`，因为它并不是一个真正的属性。

<button data-modal-for="testDialog" open>Open modal</button>
<dialog id="testDialog">
  <h1>An example of a native Dialog element</h1>
  <p>This is a dialog box and, believe it or not, it's built into HTML, sure we needed some javascript to open it but hey, it's a start.</p>
  <button data-modal-for="testDialog" close>Close modal</button>
</dialog>

dialog {
  border: none;
  border-radius: 2px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  max-width: 60vw;
}

const modalTriggers = document.querySelectorAll(`[data-modal-for]`);

for (let trigger of modalTriggers) {
  const modal = document.getElementById(trigger.dataset.modalFor);
  trigger.addEventListener('click', () => {
    trigger.hasAttribute('open') && modal.showModal();
    trigger.hasAttribute('close') && modal.close();
  });
}

在支持的浏览器中，按下按钮后的效果如下。

解释一下这段 JavaScript 代码。

我假设您了解 JavaScript 的作用，所以我将解释一下我为什么这样做。

首先，我选中所有已添加属性的元素，data-modal-for然后为它们添加事件监听器。我还给这些trigger元素添加了一个 `on`open或 ` closeoff` 属性，以指定它们将如何改变事件。dialog

我知道这意味着任何动态创建的元素都无法直接使用，但这仍然是我能想到的最好的方法。

结束语

如果你喜欢这些帖子，请告诉我things we can't really use yet but maybe one day。我觉得这个平台的进步很有意思，也乐于分享。

感谢阅读🦄🦄😀😀❤🦄