Categoría · Interactivo Nivel de Dificultad · Intermedio Publicado el · 22 de agosto de 2025
Diálogo Modal Animado

Diálogo modal moderno con animaciones suaves, estilos personalizables y características de accesibilidad, perfecto para formularios, alertas y superposiciones de contenido.
#modal #dialog #animation #popup #accessibility
Diseño Responsivo
Sí
Soporte para Modo Oscuro
Sí
líneas
365
Compatibilidad del Navegador
Chrome · Firefox · Safari · Edge
Vista Previa en Vivo

Interactúa con el componente sin salir de la página.
300px
HTML
líneas
CSS
248
líneas
JavaScript
líneas
                <div class="modal-demo">
  <button class="modal-trigger" id="openModalBtn">Abrir 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">Título del Modal</h2>
      <button class="modal-close" id="modalClose" aria-label="Cerrar modal">&times;</button>
    </div>
    <div class="modal-body">
      <p id="modalDescription">Este es un diálogo modal con animaciones suaves y características de accesibilidad.</p>
      <form class="modal-form">
        <div class="form-group">
          <label for="name">Nombre</label>
          <input type="text" id="name" name="name" required>
        </div>
        <div class="form-group">
          <label for="email">Correo Electrónico</label>
          <input type="email" id="email" name="email" required>
        </div>
        <div class="form-group">
          <label for="message">Mensaje</label>
          <textarea id="message" name="message" rows="4"></textarea>
        </div>
      </form>
    </div>
    <div class="modal-footer">
      <button class="btn btn-secondary" id="modalCancel">Cancelar</button>
      <button class="btn btn-primary" id="modalSubmit">Enviar</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);
}

/* Estilos del modal */
.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;
}

/* Animaciones */
@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);
  }
}

/* Responsivo */
@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() {
  // Obtener elementos del DOM
  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');
  
  // Abrir modal
  openModalBtn.addEventListener('click', openModal);
  
  // Funciones para cerrar el modal
  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';
  }
  
  // Escuchadores de eventos para cerrar el modal
  modalOverlay.addEventListener('click', closeModal);
  modalClose.addEventListener('click', closeModal);
  modalCancel.addEventListener('click', closeModal);
  
  // Cerrar modal con la tecla Escape
  document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape' && modal.classList.contains('active')) {
      closeModal();
    }
  });
  
  // Envío del formulario
  modalSubmit.addEventListener('click', function(e) {
    e.preventDefault();
    
    // Obtener valores del formulario
    const name = document.getElementById('name').value;
    const email = document.getElementById('email').value;
    
    // Validación simple
    if (name && email) {
      // Mostrar mensaje de éxito
      alert(`¡Formulario enviado con éxito!\nNombre: \${name}\nCorreo: \${email}`);
      closeModal();
      
      // Restablecer formulario
      document.querySelector('.modal-form').reset();
    } else {
      alert('Por favor, complete todos los campos requeridos.');
    }
  });
  
  // Enfocar dentro del modal
  const focusableElements = modal.querySelectorAll(
    'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
  );
  const firstFocusableElement = focusableElements[0];
  const lastFocusableElement = focusableElements[focusableElements.length - 1];
  
  modal.addEventListener('keydown', function(e) {
    if (e.key === 'Tab') {
      if (e.shiftKey) {
        if (document.activeElement === firstFocusableElement) {
          lastFocusableElement.focus();
          e.preventDefault();
        }
      } else {
        if (document.activeElement === lastFocusableElement) {
          firstFocusableElement.focus();
          e.preventDefault();
        }
      }
    }
  });
});

              
Compatibilidad del Navegador

Chrome
≥ 50
Firefox
≥ 45
Safari
≥ 10
Edge
≥ 15
Diálogo Modal Animado

Vista Previa en Vivo

Compatibilidad del Navegador

Fragmentos de Código Relacionados

Interfaz de Chat Animada

Botón de Volver al Inicio Animado

Temporizador de Cuenta Regresiva Animado

Explora packs de plantillas
