Mostrar una ventana dialogo en HTML5 no es algo que sea nuevo ya que durante mucho tiempo se han intentado gestionar ventanas emergentes dentro de las páginas web. Ya, en los primeros momentos de la web, los métodos alert() y confirm() nos permitían gestionar o crear estas ventanas emergentes.
En HTML5 tenemos el elemento dialog, el cual nos permite representar el contenido que queremos mostrar dentro de la ventana de dialogo. Así, la estructura del elemento dialog es la siguiente:
<dialog> <!-- Contenido del Dialogo --> </dialog>
Por lo que vamos a rellenar el dialogo de contenido, por ejemplo, insertaremos un párrafo de texto mediante el elemento p y un par de botones. En este caso añadimos dos botones mediante el elemento button. Es importante incluir botones dentro de la ventana de dialogo ya que es lo que nos permitirá el salir de dicha ventana de dialogo.
<dialog id="dialogo">
<p>¿Te gusta este ejemplo?</p>
<menu>
<button id="cancel" type="button">Cancel</button>
<button id="ok" type="button">OK</button>
</menu>
</dialog>
Además hemos puesto las opciones de los botones dentro de un elemento menu para que queden agrupadas.
Tenemos que saber que el insertar este elemento dialog dentro de la página no hará que se muestre al usuario. Es decir, permanece oculto. Para poder mostrar la ventana de dialogo deberemos de recurrir a código en Javascript para poder mostrarla.
El elemento dialog es representado dentro del modelo DOM de las páginas web mediante el interface HTMLDialogInterface. Es interface nos enseña que existe un método .show() que es el que nos permite mostrar el contenido del elemento dialog y por lo tanto mostrar la ventana modal. Así que asociaremos este método .show() a un botón para poder mostrar la ventana.
<body>
<button id="mostrar">Mostrar la Ventana</button>
<script>
var boton = document.getElementById("mostrar");
var dialogo = document.getElementById("dialogo");
boton.addEventListener("click", function(){
dialogo.showModal();
});
</script>
</body>
Vemos que nos hemos apoyado en el método .getElementById() para poder acceder al elemento dialog que hay en nuestra página, vía el id que le habíamos asignado.
De igual manera, el interface X nos enseña que tiene un método .close() que es el que nos sirve para poder cerrar una ventana modal, y por lo tanto dejar de mostrar el contenido que tenemos en el elemento dialog.
var dialogo = document.getElementById("dialogo");
var botonCancelar = document.getElementById("cancel");
var botonOK = document.getElementById("ok");
botonCancelar.addEventListener('click', function() {
dialogo.close();
});
botonOK.addEventListener('click', function() {
dialogo.close();
});
De esta forma ya habremos conseguido mostrar una ventana dialogo en HTML5 mediante el uso del elemento dialog.
