Что является противоположностью HTMLDialogElement.showModal ()?

Question

Используя элемент HTML 5.2 native <dialog> Я могу открыть диалоговое окно, используя Javascript.

document.addEventListener('DOMContentLoaded', () => {
  const dialog = document.getElementsByTagName('dialog')[0];
  dialog.showModal();
});

Как я могу использовать Javascript, чтобы закрыть диалоговое окно?

Answer 1

Диалог можно открывать и закрывать, используя методы open() и close().Недостатком использования этих методов является то, что псевдоэлемент CSS ::backdrop не будет работать.

<button id="open">Open Dialog</button>
<button id="close">Close Dialog</button>

<dialog id="dialog">
  <h2>Dialog Title</h2>
  <p>Dialog content and other stuff will go here</p>
</dialog>

<script>
const dialog = document.getElementById("dialog");

document.getElementById("open").addEventListener("click", () => {
  dialog.show();
});

document.getElementById("close").addEventListener("click", () => {
  dialog.close();
});
</script>