Blog, COLDSURF

🌊

πŸ’»

🎧

πŸŽ₯

πŸ“–

πŸ“·

πŸ§‘πŸ»β€πŸ’»

dialog tag

#html

<dialog /> Dialog Element

The <dialog> element is used to create a dialog box or modal window on a webpage. It is a part of HTML5, but there are some important considerations and limitations:
  • tabindex attribute should not be used on <dialog>.
  • Internet Explorer (IE) does not support the <dialog> element.

Attributes

  • open: Indicates that the dialog box is currently open and visible. If the open attribute is absent, the dialog should not be displayed to the user.

Examples

open Attribute

The <dialog> element can be opened using the open attribute. When this attribute is present, the dialog is displayed to the user.
<dialog open>
  <p>μ—¬λŸ¬λΆ„ μ•ˆλ…•ν•˜μ„Έμš”!</p>
</dialog>

showModal Event

To show the dialog dynamically (e.g., on a button click), you can use JavaScript to call the showModal() method, which displays the dialog as a modal.
updateButton.addEventListener('click', function onOpen() {
  if (typeof favDialog.showModal === "function") {
    favDialog.showModal();  // Opens the dialog in modal mode
  } else {
    alert("The <dialog> API is not supported by this browser");
  }
});

close Event

You can listen for the close event on the dialog, which occurs when the dialog is closed. The returnValue property of the dialog can be used to determine the value returned when it was closed.
favDialog.addEventListener('close', function onClose() {
  outputBox.value = favDialog.returnValue + " button clicked - " + (new Date()).toString();
});

MDN Documentation

For more details, you can refer to the official MDN documentation:
MDN - dialog element
← Go home