elemento de diálogo: modales más sencillas

Eiji Kitamura

Chrome Canary admite el elemento de diálogo detrás de una marca. 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 establece en dialog.returnValue.
• showModal(): Abre el diálogo modal.
• ::backdrop: Es un pseudoelemento para aplicar diseño 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 con event.preventDefault().
• Atributo autofocus: El primer control de formulario en un diálogo modal que tenga el atributo autofocus, si corresponde, se enfocará cuando se muestre el diálogo. Si no hay tal elemento, se enfocará el primer elemento enfocable.
• 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 un polyfill.

Para activarlo, habilita "Habilitar funciones experimentales de la plataforma web" en chrome://flags/.