Generador de modal (ventana emergente) con dialog

Generador de modal (ventana emergente) con dialog: para qué sirve

Las ventanas modales sirven para confirmar una acción, mostrar un formulario corto o destacar un llamado sin sacar a la persona de la página. Hechas a mano con div, suelen fallar con el teclado y con los lectores de pantalla.

Este generador usa el elemento dialog con showModal(), compatible con todos los navegadores actuales desde 2022: el navegador coloca la ventana encima, deja inerte el resto de la página, atrapa el foco, cierra con Esc y devuelve el foco al botón. El código agrega el estilo, el clic afuera para cerrar y una entrada suave con @starting-style que respeta a quienes prefieren menos movimiento.

Cómo usar

1. Escribe el título, el texto y los botones.
2. Elige el color, el ancho y las esquinas.
3. Pruébalo en la vista previa y copia el código.

Cuándo usar

• Llamado para agendar por WhatsApp.
• Confirmación antes de una acción.
• Aviso de novedad o formulario corto.

Preguntas frecuentes

¿Por qué usar el elemento dialog?

Con showModal() el navegador coloca la ventana por encima de todo, deja inerte el resto de la página, atrapa el foco dentro de ella, la cierra con Esc y devuelve el foco al botón que la abrió. Antes esto requería bastante JavaScript y casi siempre quedaba con fallas de accesibilidad.

¿Funciona en todos los navegadores?

Sí, dialog es compatible con Chrome, Edge, Firefox y Safari desde 2022.

¿Puedo abrir el modal automáticamente al entrar al sitio?

Puedes, pero una ventana emergente que se abre sin que la persona lo pida suele molestar y, en el celular, Google puede penalizar las páginas con anuncios intrusivos que tapan el contenido. Es mejor abrirlo desde un botón.

¿Es gratis de verdad?

Sí, 100% gratis. Sin registro, sin suscripción y sin límite de uso. Todas las herramientas de Tools123 son gratuitas.

Herramientas similares