Cómo utilizar el elemento de diálogo de HTML5

Con la eliminación de los plugins también veremos tiempos de carga más rápidos

En el último par de años los pop-ups y cajas modales se han convertido en mucho más populares, y con el elemento dialog de HTML5 podemos crear fácilmente diálogos HTML y modales sin necesidad de ningún plugin JavaScript, sólo simple HTML y algo de JavaScript.

Dado que esta característica es tan nueva sólo está disponible en Chrome Canary e incluso entonces tienes que ir a chrome://flags y habilitar las Experimental Web Platform Features con el fin de que funcione correctamente.

Afortunadamente también hay un polyfill desarrollado por Google que ayuda a los navegadores antiguos a apoyar este elemento.

Creación de diálogos

Este elemento hace que la creación de cuadros de diálogo sea muy fácil y funciona como era de esperar, el código HTML para un diálogo sería algo como esto:

<dialog id="dialog">
<p>Hello World</p>


 <button id="close">Close</button>
</dialog>

El código se explica bastante por sí mismo, pero si lo agregas a un archivo y abres en un navegador verás que el diálogo no aparece automáticamente porque para eso hay que llamar al método show de este modo:

var dialog = document.getElementById('dialog');
dialog.show();

Ahora, cuando se cargue la página se podrá ver el diálogo de inmediato. Esto puede ser algo que quieras, pero por lo general queremos que estas ventanas emergentes aparezcan cuando el usuario hace clic en un botón determinado y por eso tenemos que crear un botón de disparo en nuestro HTML:

<button id="launch">Launch me</button>

Y en nuestra JavaScript sólo tenemos que ajustar nuestro código show en el interior de un detector de eventos que se activa cuando el usuario ha hecho clic en el botón de inicio:

var dialog = document.getElementById('dialog');
$('#launch').click(function() {


   dialog.show();
});

Otro método que tenemos para los diálogos es el método close. Ya tenemos un botón de cierre en nuestro diálogo para añadir la funcionalidad del cierre para que sea muy simple:

$('#close').click(function() {


    var close = document.getElementById('close');


    dialog.close();
});

Ahora tenemos un diálogo completamente funcional con algunos simples HTML y Javascript.

Como se puede notar no estoy usando jQuery para los métodos de diálogo y en su lugar estoy usando JavaScript normal, y es porque jQuery ya tiene un método show y al intentar utilizar esta funcionalidad hay un conflicto con jQuery.

Crear Modales

Verbos modales son muy similares a los diálogos, pero son diferentes en el sentido de que los modales no te permiten interactuar con cualquier cosa en la página, además del propio modal.

Creación de modales es similar a crear cuadros de diálogo, nuestro HTML será:

<button id="launch-modal">Launch Modal</button>
<dialog id="modal">


  <p>You can not click anything else</p>


  <button id="close-modal">Close</button>
</dialog>

Como se puede ver todo lo que hice fue cambiar el texto y es para reflejar el cambio de ID del diálogo modal. El código del JavaScript también es bastante similar todo lo que tenemos que cambiar es el método con que llamamos al modal que el método es ShowModal. El JavaScript es:

var modal = document.getElementById('modal');
$('#launch-modal').click(function() {
modal.showModal();
});
$('#close-modal').click(function() {
var close = document.getElementById('close-modal');
modal.close();
});

Si pruebas este modal verás que de hecho no te permite interactuar con cualquier otra cosa en la página, aparte del propia modal.

También puedes ver una demostración en este pen:

Cuando se trata del estilo de los elementos que deseas, irán sobre él como lo haría en cualquier elemento, pero una cosa a destacar es que cuando se utilizan modales también hay a tu disposición un pseudo-elemento backdrop y un pseudo-elemento estilo de background detrás del modal, y se puede utilizar esta opción para agregar una textura o incluso oscurecer el fondo completamente para que el usuario no pueda interactuar o ver cualquier otro elemento:

dialog::backdrop {
background: rgba(0,0,0,0.9);
}

Esto significa que con la ayuda de CSS puedes cambiar el backdrop de fondo y el diálogo en sí de la forma que quieras y es porque el estilo semántico HTML es mucho más fácil.

Conclusión

Este elemento no es uno que podamos usar de inmediato en nuestros proyectos, pero es algo que podemos buscar en el futuro, ya que hace nuestro trabajo como desarrolladores mucho más fácil.

Con la eliminación de los plugins utilizados para este efecto también veremos tiempos de carga más rápidos.