elemento de diálogo: modales más sencillas

Eiji Kitamura

Twitter GitHub Glitch Mastodon

Chrome Canary ahora admite el elemento de diálogo detrás de una función experimental. El elemento dialog se puede usar para ventanas emergentes en una página web.

• show(): Abre el diálogo.
• close(): Cierra el diálogo. Toma un argumento opcional que, si está presente, se configura dialog.returnValue.
• showModal(): Abre el diálogo modal.
• ::backdrop: Seudoelemento para aplicar estilo al fondo detrás de un diálogo modal.
• Evento close: Se activa cuando se cierra un diálogo.

Actualización del 16 de diciembre de 2013

El elemento dialog ahora admite lo siguiente:

• Evento cancel: Se activa cuando se presiona la tecla Escape en un diálogo modal. Este evento se puede cancelar mediante event.preventDefault().
• Atributo autofocus: El primer control de formulario de un diálogo modal que tenga el atributo autofocus (si lo hubiera) se enfocará cuando se muestre el diálogo. Si no existe ese elemento, el primer elemento enfocable se enfoca.
• form[method="dialog"]: Solo es válido dentro de un diálogo. Cuando se envía el formulario, se cierra el diálogo y se establece dialog.returnValue en el valor del botón de envío que se usó.

Consulta los detalles con una demostración en vivo y polyfill.

Para activarla, habilita la opción "Habilitar funciones experimentales de la plataforma web" en chrome://flags/.