Dialog demo

by REPLY2SAGAR

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Details, Summary, and Dialog Example</title>
    <style>
        /* Styling the dialog for better visibility */
        dialog {
            border: 2px solid #444;
            border-radius: 5px;
            padding: 20px;
            position: fixed;
            top: 20%;
            left: 20%;
            background-color: white;
            z-index: 1000;
        }
    </style>
    <script>
        // JavaScript for handling the dialog
        document.addEventListener("DOMContentLoaded", function() {
            const dialog = document.getElementById("myDialog");
            const openDialogBtn = document.getElementById("openDialog");
            const closeDialogBtn = document.getElementById("closeDialog");

            openDialogBtn.addEventListener("click", function() {
                dialog.showModal(); // Use `show()` for non-modal dialog
            });

            closeDialogBtn.addEventListener("click", function() {
                dialog.close();
            });
        });
    </script>
</head>
<body>
    <h1>Interactive Elements Example</h1>

    <!-- Details and Summary for collapsible content -->
    <details>
        <summary>Click to view more details</summary>
        <p>This is additional content that was hidden but can be viewed by clicking the summary above.</p>
    </details>

    <!-- Button to open dialog -->
    <button id="openDialog">Open Dialog</button>

    <!-- Dialog element -->
    <dialog id="myDialog">
        <h2>Dialog Title</h2>
        <p>This is a dialog window. You can place any content here, including forms.</p>
        <button id="closeDialog">Close Dialog</button>
    </dialog>

</body>
</html>