5 Inspiring JavaScript Modal & Popup Form Examples

Expand your web development toolkit with these five inspiring examples of JavaScript modals and popup forms. Learn how to create interactive elements that engage users and enhance the overall user experience of your projects.

1. Login and Sign Up Modal

This intuitive modal allows users to easily access both login and sign up forms in a single popup. The user can switch between the two forms without closing the modal, providing a seamless experience.

// HTML
<div id="modal" class="modal">
  <div class="modal-content">
    <span class="close">&times;</span>
    <div class="form-container">
      <form id="login-form">
        <!-- Login Form Elements -->
      </form>
      <form id="sign-up-form">
        <!-- Sign Up Form Elements -->
      </form>
    </div>
  </div>
</div>

// JavaScript
document.querySelector('.close').addEventListener('click', () => {
  document.querySelector('#modal').style.display = 'none';
});

2. Image Gallery Modal

An image gallery modal enhances the user's experience by providing a full-screen view of images. This example demonstrates how to display an image in a modal and navigate through the gallery.

// HTML
<div class="gallery">
  <img src="image1.jpg" alt="Image 1" onclick="openModal(this)">
  <img src="image2.jpg" alt="Image 2" onclick="openModal(this)">
</div>
<div id="modal" class="modal">
  <span class="close">&times;</span>
  <img class="modal-content" id="modal-image">
  <button class="prev" onclick="prevImage()">&#10094;</button>
  <button class="next" onclick="nextImage()">&#10095;</button>
</div>

// JavaScript
let currentImage;
function openModal(image) {
  currentImage = image;
  document.querySelector('#modal-image').src = image.src;
  document.querySelector('#modal').style.display = 'block';
}
function prevImage() {
  // Implement logic to display the previous image
}
function nextImage() {
  // Implement logic to display the next image
}

3. Cookie Consent Modal

Inform users about your website's cookie policy using a simple and clean modal. This example displays the modal upon the user's first visit and hides it once they provide consent.

// HTML
<div id="modal" class="modal">
  <div class="modal-content">
    <p>We use cookies to enhance your experience. By continuing to browse our site, you agree to our <a href="/cookie-policy">cookie policy</a>.</p>
    <button onclick="acceptCookies()">Accept</button>
  </div>
</div>

// JavaScript
if (!localStorage.getItem('cookieConsent')) {
  document.querySelector('#modal').style.display = 'block';
}

function acceptCookies() {
  localStorage.setItem('cookieConsent', true);
  document.querySelector('#modal').style.display = 'none';
}

4. Video Popup

Embed a video in a popup, allowing users to watch the video without navigating to another page. This example showcases a YouTube video embedded within a modal.

// HTML
<button onclick="openModal()">Watch Video</button>
<div id="modal" class="modal">
  <div class="modal-content">
    <span class="close" onclick="closeModal()">&times;</span>
    <iframe id="video" src="https://www.youtube.com/embed/your-video-id" frameborder="0" allowfullscreen></iframe>
  </div>
</div>

// JavaScript
function openModal() {
  document.querySelector('#modal').style.display = 'block';
}

function closeModal() {
  document.querySelector('#modal').style.display = 'none';
  document.querySelector('#video').src = document.querySelector('#video').src; // Pause the video
}

5. Newsletter Subscription Popup

Encourage users to subscribe to your newsletter with an eye-catching popup form. This example shows a simple subscription form that appears after a certain period.

// HTML
<div id="modal" class="modal">
  <div class="modal-content">
    <span class="close" onclick="closeModal()">&times;</span>
    <h3>Subscribe to our newsletter</h3>
    <form id="subscription-form">
      <input type="email" placeholder="Enter your email" required>
      <button type="submit">Subscribe</button>
    </form>
  </div>
</div>

// JavaScript
setTimeout(() => {
  document.querySelector('#modal').style.display = 'block';
}, 10000); // 10 seconds

function closeModal() {
  document.querySelector('#modal').style.display = 'none';
}

Incorporate these versatile examples into your web projects to create engaging user experiences. As you become more familiar with JavaScript modals and popup forms, experiment with unique designs and functionalities to truly make your projects stand out.