Modal Popup Form

<!DOCTYPE html>
<title>My Example</title>

/* Modal Overlay (the dark background) */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s, visibility 0.3s;
    z-index: 1000;
}
.modal-overlay.visible {
    visibility: visible;
    opacity: 1;
}

/* Modal Dialog (the content box) */
.modal-dialog {
    background: #fff;
    padding: 25px;
    border-radius: 8px;
    width: 90%;
    max-width: 450px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    transform: scale(0.9);
    transition: transform 0.3s;
    font-family: sans-serif;
}
.modal-overlay.visible .modal-dialog {
    transform: scale(1);
}
.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}
.modal-header h2 {
    margin: 0;
}
.modal-close-btn {
    background: none;
    border: none;
    font-size: 1.5rem;
    font-weight: bold;
    cursor: pointer;
    color: #888;
}

/* -- The form inside the modal -- */
.modal-form .form-group { margin-bottom: 15px; }
.modal-form .form-group label { display: block; margin-bottom: 5px; font-weight: 500; }
.modal-form .form-group input { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 4px; font-size: 1rem; box-sizing: border-box; }
.modal-form .submit-btn { width: 100%; padding: 12px; background: #007bff; color: white; border: none; border-radius: 4px; font-size: 1rem; cursor: pointer; }
</style>

<button type="button" id="openModalBtn">Open Login Form</button>

<div class="modal-overlay" id="formModal" role="dialog" aria-modal="true" aria-labelledby="modalTitle">
    <div class="modal-dialog">
        <div class="modal-header">
            <h2 id="modalTitle">Member Login</h2>
            <button class="modal-close-btn" id="closeModalBtn" aria-label="Close modal">Ã—</button>
        </div>
        <div class="modal-body">
            <form class="modal-form" action="#" method="post">
                <div class="form-group">
                    <label for="modal-email">Email</label>
                    <input type="email" id="modal-email" name="email" required>
                </div>
                 <div class="form-group">
                    <label for="modal-password">Password</label>
                    <input type="password" id="modal-password" name="password" required>
                </div>
                <button type="submit" class="submit-btn">Log In</button>
            </form>
        </div>
    </div>
</div>

if (openBtn && closeBtn && modal) {
    // Function to open the modal
    const openModal = () => {
        modal.classList.add('visible');
        document.body.classList.add('modal-open');
    };
    
    // Function to close the modal
    const closeModal = () => {
        modal.classList.remove('visible');
        document.body.classList.remove('modal-open');
    };
    
    // Event Listeners
    openBtn.addEventListener('click', openModal);
    closeBtn.addEventListener('click', closeModal);
    
    // Close modal by clicking the overlay
    modal.addEventListener('click', (e) => {
        // If the click is on the overlay itself, not the dialog
        if (e.target === modal) {
            closeModal();
        }
    });

// Close modal by pressing the Escape key
    document.addEventListener('keydown', (e) => {
        if (e.key === 'Escape' && modal.classList.contains('visible')) {
            closeModal();
        }
    });
}
</script>