Category · Interactive Difficulty Level · Intermediate Published on · August 22, 2025
Animated Modal Dialog

Modern modal dialog with smooth animations, customizable styles, and accessibility features, perfect for forms, alerts, and content overlays.
#modal #dialog #animation #popup #accessibility
Responsive Design
Yes
Dark Mode Support
Yes
lines
333
Browser Compatibility
Chrome · Firefox · Safari · Edge
Live Preview

Interact with the component without leaving the page.
300px
HTML
lines
CSS
248
lines
JavaScript
lines
                <div class="modal-demo">
  <button class="modal-trigger" id="openModalBtn">Open Modal</button>
</div>

<!-- Modal -->
<div class="modal" id="modal" role="dialog" aria-labelledby="modalTitle" aria-describedby="modalDescription" aria-hidden="true">
  <div class="modal-overlay" id="modalOverlay"></div>
  <div class="modal-container" role="document">
    <div class="modal-header">
      <h2 id="modalTitle">Modal Title</h2>
      <button class="modal-close" id="modalClose" aria-label="Close modal">&times;</button>
    </div>
    <div class="modal-body">
      <p id="modalDescription">This is a modal dialog with smooth animations and accessibility features.</p>
      <form class="modal-form">
        <div class="form-group">
          <label for="name">Name</label>
          <input type="text" id="name" name="name" required>
        </div>
        <div class="form-group">
          <label for="email">Email</label>
          <input type="email" id="email" name="email" required>
        </div>
        <div class="form-group">
          <label for="message">Message</label>
          <textarea id="message" name="message" rows="4"></textarea>
        </div>
      </form>
    </div>
    <div class="modal-footer">
      <button class="btn btn-secondary" id="modalCancel">Cancel</button>
      <button class="btn btn-primary" id="modalSubmit">Submit</button>
    </div>
  </div>
</div>

              

                .modal-demo {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 200px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 15px;
}

.modal-trigger {
  padding: 15px 30px;
  background: rgba(255, 255, 255, 0.2);
  color: white;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}

.modal-trigger:hover {
  background: rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.5);
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

/* Modal styles */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  visibility: hidden;
  opacity: 0;
}

.modal.active {
  visibility: visible;
  opacity: 1;
}

.modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.modal.active .modal-overlay {
  opacity: 1;
}

.modal-container {
  position: relative;
  background: white;
  border-radius: 15px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
  width: 90%;
  max-width: 500px;
  max-height: 90vh;
  overflow-y: auto;
  transform: scale(0.7) translateY(50px);
  transition: transform 0.3s ease;
}

.modal.active .modal-container {
  transform: scale(1) translateY(0);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 25px 25px 15px;
  border-bottom: 1px solid #f0f0f0;
}

.modal-header h2 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 600;
  color: #333;
}

.modal-close {
  background: none;
  border: none;
  font-size: 24px;
  color: #999;
  cursor: pointer;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.2s ease;
}

.modal-close:hover {
  background: #f1f5f9;
  color: #333;
}

.modal-body {
  padding: 25px;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 15px;
  padding: 15px 25px 25px;
  border-top: 1px solid #f0f0f0;
}

.btn {
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-primary {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
}

.btn-secondary {
  background: #f1f5f9;
  color: #666;
}

.btn-secondary:hover {
  background: #e2e8f0;
  transform: translateY(-2px);
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  color: #333;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 12px 15px;
  border: 2px solid #e2e8f0;
  border-radius: 8px;
  font-size: 14px;
  transition: border-color 0.3s ease;
  box-sizing: border-box;
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #667eea;
}

/* Animations */
@keyframes modalFadeIn {
  from {
    opacity: 0;
    visibility: hidden;
  }
  to {
    opacity: 1;
    visibility: visible;
  }
}

@keyframes modalFadeOut {
  from {
    opacity: 1;
    visibility: visible;
  }
  to {
    opacity: 0;
    visibility: hidden;
  }
}

@keyframes modalSlideIn {
  from {
    transform: scale(0.7) translateY(50px);
  }
  to {
    transform: scale(1) translateY(0);
  }
}

@keyframes modalSlideOut {
  from {
    transform: scale(1) translateY(0);
  }
  to {
    transform: scale(0.7) translateY(50px);
  }
}

/* Responsive */
@media (max-width: 768px) {
  .modal-container {
    width: 95%;
    margin: 20px;
  }
  
  .modal-header,
  .modal-body,
  .modal-footer {
    padding: 20px;
  }
  
  .modal-footer {
    flex-direction: column;
  }
  
  .btn {
    width: 100%;
  }
}

              

                document.addEventListener('DOMContentLoaded', function() {
  // Get DOM elements
  const openModalBtn = document.getElementById('openModalBtn');
  const modal = document.getElementById('modal');
  const modalOverlay = document.getElementById('modalOverlay');
  const modalClose = document.getElementById('modalClose');
  const modalCancel = document.getElementById('modalCancel');
  const modalSubmit = document.getElementById('modalSubmit');
  
  // Open modal
  openModalBtn.addEventListener('click', openModal);
  
  // Close modal functions
  function openModal() {
    modal.classList.add('active');
    modal.setAttribute('aria-hidden', 'false');
    document.body.style.overflow = 'hidden';
    modal.focus();
  }
  
  function closeModal() {
    modal.classList.remove('active');
    modal.setAttribute('aria-hidden', 'true');
    document.body.style.overflow = 'auto';
  }
  
  // Close modal event listeners
  modalOverlay.addEventListener('click', closeModal);
  modalClose.addEventListener('click', closeModal);
  modalCancel.addEventListener('click', closeModal);
  
  // Close modal with Escape key
  document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape' && modal.classList.contains('active')) {
      closeModal();
    }
  });
  
  // Form submission
  modalSubmit.addEventListener('click', function(e) {
    e.preventDefault();
    
    // Get form values
    const name = document.getElementById('name').value;
    const email = document.getElementById('email').value;
    
    // Simple validation
    if (name && email) {
      // Show success message
      alert(`Form submitted successfully!

              
Browser Compatibility

Chrome
≥ 50
Firefox
≥ 45
Safari
≥ 10
Edge
≥ 15
Animated Modal Dialog

Live Preview

Browser Compatibility

Related Code Snippets

Animated Back to Top Button

Animated Chat Interface

Animated FAQ Accordion

Explore template packs
