Modal/Popup Form Template

Capture user attention for important actions like login or newsletter signups with a clean modal form.

This self-contained component provides everything you need: a trigger button, a semi-transparent overlay, and a modal dialog window with a close button and a sample form.

Get Source Code → Preview →

About this Modal Form

A modal (or popup) is a dialog box that appears on top of the main page content, which is usually dimmed in the background with an overlay. This is a very effective pattern for focused tasks, as it prevents the user from interacting with the rest of the page until the modal is dealt with.

This template is built with accessibility and usability in mind:

The Trigger: A simple button is used to open the modal.
The Modal Structure: The modal itself is a div containing an overlay, the dialog content, a close button, and the form. It is hidden by default with CSS.
The JavaScript: A small script handles the logic. It adds event listeners to the trigger button to open the modal, and to the close button and overlay to close it. It also listens for the "Escape" key for dismissal, which is an important usability feature.

Features

Self-Contained Component: The HTML, CSS, and JS work together as a single unit.
Multiple Close Options: The modal can be closed by clicking the X button, clicking the background overlay, or pressing the Escape key.
Accessibility Considered: Uses ARIA attributes like role="dialog" and aria-modal="true" to describe the modal's purpose to assistive technologies.
CSS Transitions: A subtle fade-in effect is included for a smoother appearance.

Dependencies

Uses pure HTML and CSS, with a necessary, self-contained JavaScript block to function.

Code

Here's the full code for the modal/popup form:

/* 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>

View Output