Ventana Modal Moderna: con HTML/CSS/JS, React, Bootstrap, Vue y TailwindCSS

📐 Fundamentos: Ventana Modal con HTML, CSS y JavaScript Puro

📐 Fundamentos: Ventana Modal con HTML, CSS y JavaScript Puro

Antes de frameworks, domina lo básico. Un modal puro te da control total sobre rendimiento y accesibilidad.

Estructura HTML Semántica

HTML

<!-- Botón trigger -->
<a href="#modalConfirmacion" class="btn-modal">Abrir Modal</a>

<!-- Estructura del modal -->
<div id="modalConfirmacion" class="modalDialog">
  <div>
    <a href="#cerrar" title="Cerrar" class="close">×</a>
    <h2>Formulario Enviado</h2>
    <p>La información se ha procesado correctamente.</p>
  </div>
</div>

CSS Moderno sin Dependencias

.modalDialog {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  background: rgba(0,0,0,0.8);
  z-index: 99999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 400ms ease-in;
}

.modalDialog:target {
  opacity: 1;
  pointer-events: auto;
}

.modalDialog > div {
  width: 90%;
  max-width: 500px;
  margin: 10% auto;
  padding: 20px;
  border-radius: 10px;
  background: #fff;
  position: relative;
}

.close {
  background: #606061;
  color: #FFFFFF;
  position: absolute;
  right: -12px; top: -10px;
  width: 30px; height: 30px;
  border-radius: 50%;
  text-align: center;
  line-height: 30px;
}

Ventajas SEO: ✅ Peso 0KB externo ✅ Carga instantánea ✅ Sin JavaScript bloqueante

---

⚛️ Diseño de Modal en React JS: Componente Reutilizable con Hooks

⚛️ Diseño de Modal en React JS: Componente Reutilizable con Hooks

React exige un enfoque componentizado. Aquí te muestro la implementación moderna con Portals para evitar problemas de z-index.

1. Configura el Portal en index.html

HTML

<div id="root"></div>
<div id="modal-portal"></div> <!-- Nuevo contenedor -->

2. Componente Modal con Hooks

jsx

// Modal.js
import { useEffect, useRef } from 'react';
import ReactDOM from 'react-dom';

const Modal = ({ isOpen, onClose, children, title }) => {
  const modalRef = useRef(null);

  useEffect(() => {
    const handleEscape = (e) => {
      if (e.key === 'Escape') onClose();
    };
    
    if (isOpen) {
      document.addEventListener('keydown', handleEscape);
      document.body.style.overflow = 'hidden'; // Previene scroll
    }
    
    return () => {
      document.removeEventListener('keydown', handleEscape);
      document.body.style.overflow = 'unset';
    };
  }, [isOpen, onClose]);

  if (!isOpen) return null;

  return ReactDOM.createPortal(
    <div className="modal-backdrop" onClick={onClose}>
      <div 
        className="modal-content" 
        onClick={(e) => e.stopPropagation()}
        ref={modalRef}
        role="dialog"
        aria-modal="true"
        aria-labelledby="modal-title"
      >
        <button 
          className="modal-close" 
          onClick={onClose}
          aria-label="Cerrar modal"
        >
          ×
        </button>
        <h2 id="modal-title">{title}</h2>
        {children}
      </div>
    </div>,
    document.getElementById('modal-portal')
  );
};

export default Modal;

3. Uso en tu Aplicación

jsx

// App.jsx
import { useState } from 'react';
import Modal from './Modal';

function App() {
  const [isModalOpen, setModalOpen] = useState(false);

  return (
    <>
      <button onClick={() => setModalOpen(true)}>
        Mostrar Modal React
      </button>
      
      <Modal 
        isOpen={isModalOpen} 
        onClose={() => setModalOpen(false)}
        title="Suscripción Exitosa"
      >
        <p>Gracias por suscribirte a nuestro newsletter.</p>
        <button className="btn-primary">Aceptar</button>
      </Modal>
    </>
  );
}

Mejora SEO: Los Portales evitan problemas de indexación por jerarquía DOM y mejoran la accesibilidad con ARIA attributes

---

🅱️ Bootstrap 5: La Solución Rápida y Responsiva

🅱️ Bootstrap 5: La Solución Rápida y Responsiva

Bootstrap sigue siendo el framework más popular por su simplicidad. Su componente modal está listo para producción.

Implementación Básica

HTML

<!-- Trigger button -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#miModalBootstrap">
  Abrir Modal Bootstrap
</button>

<!-- Estructura Modal -->
<div class="modal fade" id="miModalBootstrap" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Confirmación</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        ¿Estás seguro de que deseas continuar con esta acción?
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
        <button type="button" class="btn btn-success">Confirmar</button>
      </div>
    </div>
  </div>
</div>

Mejores Prácticas Bootstrap

• Solo un modal a la vez: Bootstrap no soporta modales anidados nativamente

• Posición fija: Coloca el HTML del modal en nivel superior para evitar conflictos con position: fixed

• Mobile-first: Usa modal-dialog-scrollable para contenido largo en móviles

SEO Score: Bootstrap puede añadir peso (30-50KB), pero mejora el CLS (Cumulative Layout Shift) al tener componentes estables.

---

🟢 Vue JS: Componente Modal con Composition API

🟢 Vue JS: Componente Modal con Composition API

Vue brinda reactividad nativa y sintaxis limpia. Aquí la versión moderna con Composition API y TypeScript.

Componente Modal.vue

vue

<template>
  <Teleport to="body">
    <div v-if="isOpen" class="modal-overlay" @click="close">
      <div class="modal-box" @click.stop>
        <header class="modal-header">
          <h3>{{ title }}</h3>
          <button @click="close" aria-label="Cerrar">×</button>
        </header>
        <main class="modal-body">
          <slot name="content" />
        </main>
        <footer class="modal-actions">
          <slot name="actions" />
        </footer>
      </div>
    </div>
  </Teleport>
</template>

<script setup>
import { watch } from 'vue';

const props = defineProps({
  isOpen: Boolean,
  title: String
});

const emit = defineEmits(['close']);

const close = () => {
  emit('close');
};

// Bloquear scroll cuando está abierto
watch(() => props.isOpen, (newVal) => {
  document.body.style.overflow = newVal ? 'hidden' : '';
});
</script>

<style scoped>
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-box {
  background: white;
  border-radius: 12px;
  min-width: 300px;
  max-width: 90%;
  animation: slideDown 0.3s ease;
}

@keyframes slideDown {
  from { transform: translateY(-50px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
</style>

Implementación en Padre

vue

<template>
  <button @click="modalOpened = true">Abrir Modal Vue</button>
  
  <Modal 
    :is-open="modalOpened" 
    title="Alerta de Seguridad"
    @close="modalOpened = false"
  >
    <template #content>
      <p>Política de seguridad actualizada. Revisa la documentación.</p>
    </template>
    <template #actions>
      <button @click="modalOpened = false">Aceptar</button>
    </template>
  </Modal>
</template>

<script setup>
import { ref } from 'vue';
import Modal from './Modal.vue';

const modalOpened = ref(false);
</script>

Ventaja SEO: <Teleport> evita problemas de jerarquía y mejora la accesibilidad, similar a React Portals

---