html
  1. html-dialog-tag
PreviousNext

HTML <dialog> Tag

  • The <dialog> tag in HTML is used to create a dialog box or modal window within a web page.
  • It's designed to display interactive content that demands the user's attention or input without navigating away from the current page.

<dialog id="myDialog">
    <p>This is a dialog box.</p>
    <button id="closeDialog">Close</button>
</dialog>

<button id="openDialog">Open Dialog</button>

<script>
    const myDialog = document.getElementById('myDialog');
    const openButton = document.getElementById('openDialog');
    const closeButton = document.getElementById('closeDialog');

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

    closeButton.addEventListener('click', () => {
        myDialog.close();
    });
</script>
Try Playground

The <dialog> element has several properties and methods associated with it, some of which are part of the JavaScript interface for handling dialog behavior.

Properties:

  • open: This Boolean attribute, when present, indicates that the dialog is active and visible on the page.
  • returnValue: Used to get or set the return value of the dialog.

Methods:

  • show(): Opens and displays the dialog box.
  • showModal(): Opens a modal dialog, which requires user interaction before returning to the page.
  • close(): Closes the dialog box.
Summary

The <dialog> tag, while available in HTML, its functionality and appearance are often customized using CSS and scripted behaviors through JavaScript to control its display and interaction with the user.

<del> Tag<div> Tag
Published on: