El nuevo elemento de diálogo de HTML 5.2

Usar el elemento es muy simple, con su forma básica con este aspecto:

<dialog open="">
This is a dialog box!
</dialog>

El atributo adicional «abierto» se asegura de que el cuadro de diálogo se muestra realmente. Sin el atributo, incluso abrir el cuadro requeriría que uses JavaScript. De forma predeterminada, sin el uso de CSS, el cuadro de diálogo se ve muy poco atractivo.

Eso superposiciones todo el contenido completo de la página, se coloca en el medio de la pantalla, enmarcada por un borde negro, con un tamaño determinado por el contenido de la caja. La superposición coloca un llamado telón de fondo en la página, evitando cualquier interacción con el contenido fuera de la caja.

Fondo es nuevo también, y es el nombre del acuerdo pseudo-elemento :: telón de fondo, que se puede diseñar a través de CSS para que sea transparente, colorido o como desee. El diálogo en sí está diseñado como de costumbre, a través de CSS, como cualquier otro elemento.

Dentro del elemento de diálogo, use otros elementos HTML para estructura su cuadro de diálogo y compárelo para que coincida con sus requisitos. Teóricamente, hay sin límite a tu imaginación.

Sin embargo, sin JavaScript, este elemento tiene poco uso, ya que solo mostrar una ventana de diálogo estática abierta o cerrada no es muy sensato. Los métodos JavaScript showModal () y cerrar() le permite controlar el atributo mencionado anteriormente abierto.

El primer método agrega el atributo, abriendo el cuadro de diálogo. El segundo método elimina el atributo, cerrando el cuadro de diálogo. No necesitamos más flexibilidad aquí de todos modos.

Hablando de nuevo …

Puedes decir que esto ni siquiera era nuevo. Y por supuesto, tienes razón. Chrome ha estado respaldando esta implementación exacta desde 2014. En Firefox, puede activar este soporte. Microsoft todavía lo está pensando, al menos para Edge. Otros no participan en absoluto. Usar este polyfill de JavaScript para obligar a los que no están dispuestos a cooperar.

En aras de la reivindicación, cabe mencionar que el elemento de diálogo solo tiene sentido desde el punto de vista de la accesibilidad. A los lectores de pantalla les resulta más fácil identificar estos elementos. Para el caso de aplicación real, que es la visualización de cuadros de diálogo, existen varias soluciones, siendo la más popular la implementación en Bootstrap, que también se puede realizar de forma accesible.

Entonces, el elemento no es nuevo en un sentido literal. Sin embargo, se ha agregado recientemente al estándar, lo que lo convierte en un parte de HTML 5.2.