HTML Dialog Tag

HTML <dialog> tag is used to create a dialog box or a pop-up window within a web page. This element can be used for things like displaying a modal window, confirmation box, or custom alerts. The <dialog> element is a part of the HTML5 specification and allows you to create interactive, user-friendly pop-up dialogs without relying on external libraries.

HTML Dialog Tag with Syntax

HTML Dialog Tag

<dialog>
  <!-- Enter Content of dialog -->
</dialog>

HTML Dialog Tag with Attributes

open: This boolean attribute, when present, indicates that the dialog is active and visible to the user.
close(): A method to close the dialog programmatically.
show(): A method to display the dialog without any context.
showModal(): A method to display the dialog as a modal, preventing interaction with the rest of the page until the dialog is closed.

HTML Dialog Tag Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dialog Tag With Example</title>
    <style>
        dialog {
            padding: 20px;
            border: 2px solid #333;
            border-radius: 8px;
        }
    </style>
</head>
<body>
    <h1>Dialog Tag with Example</h1>
    <button id="openDialog">Open Dialog</button>
    <dialog id="myDialog">
        <h2>SakalaCode</h2>
        <p>SakalaCode HTML <strong>&lt;dialog&gt;</strong> tag.</p>
        <button id="closeDialog">Close</button>
    </dialog>
    <script>
        const dialog = document.getElementById('myDialog');
        const openBtn = document.getElementById('openDialog');
        const closeBtn = document.getElementById('closeDialog');


        openBtn.addEventListener('click', () => {
            dialog.showModal();
        });
        closeBtn.addEventListener('click', () => {
            dialog.close();
        });
    </script>
</body>
</html>

341