Ventanas Emergentes y Modales de forma nativa con el Elemento "dialog" de HTML5

Spanish (Español) translation by Javier Salesi (you can also view the original English article)

Muchos procesos en la web éstos días requieren el total consentimiento del usuario para completarse. Por ejemplo, los usuarios pueden necesitar remover una cuenta, cambiar su nombre de usuario, o confirmar una transacción monetaria.

Un planteamiento común de UX (experiencia de usuario) en tales casos es mostrar una ventana o cuadro de diálogo típicamente con dos botones; uno para cancelar y otro para proceder con la acción. Hemos estado dependiendo de librarías Javascript para hacer ésto durante años, sin embargo en éste tutorial vamos a hacer cosas nativamente con el elemento experimental <dialog>.

Usar el Elemento Dialog

<dialog> es un elemento de HTML5 (5.1 para ser exacto). Está clasificado como una "sección raíz", similar a los elementos <body>, <blockquote>, y <details>, cada uno de los cuáles establece una nueva sección de contenido independientemente. Puedes colocarlo como un hijo del body, o anidarlo dentro de un elemento como un <div> o <section>-ambos planteamientos son válidos.

<body>
  
	<div>
		<dialog></dialog>
	</div>
	
	<section>
		<dialog></dialog>
	</section>

	<dialog></dialog>	
</body>

Navegadores que lo soportan (Chrome 37+ y Opera 27+) renderizarán el elemento <dialog> oculto por defecto, sólo haciéndolo visible al solicitarlo con Javascript usando los métodos show() o showModal(), y el método close() para ocultarlo nuevamente. Generalmente, ejecutaríamos éste método dentro de un evento click, así:

var $accountDelete = $('#delete-account'),
    $accountDeleteDialog = $('#confirm-delete');

	  $accountDelete.on('click', function() {
	    $accountDeleteDialog[0].showModal();
	  });

	  $('#cancel').on('click', function() {
	    $accountDeleteDialog[0].close();
	  });

El Método `show()` contra el método `showModal()`

Vale la pena notar que show() y showModal() se comportan de manera diferente.

El método show() revela el elemento de acuerdo con su posición en el flujo DOM. Si lo agregaste inmediatamente antes de la etiqueta de cierre de body, puede aparecer en la parte inferior de la página web. Tendríamos que añadir estilos personalizados para ajustar su posición, por ejemplo, si queremos colocarlo centrado en la página. Éstos estilos usarían típicamente z-index para apilar el elemento arriba de otros elementos, la propiedad position establecida en absolute, junto con left y top.

El método showModal(), por otra parte, mostrará el elemento como modal. Será mostrado al centro de la página por defecto, y reside en la capa superior, como la API fullScreen (de pantalla completa) que evita la interferencia de z-index, posición relativa y el desbordamiento del elemento padre.

En la mayoría de los casos, es probable que utilicemos la conveniencia del método showModal() en lugar del método show().

Personalizar Estilos

El cuadro de diálogo lleva el estilo predeterminado de los navegadores que puede ser fácilmente sobreescrito como la mayoría de los otros elementos. Puedes, por ejemplo, hacer más delgado el borde del cuadro de diálogo, hacer las esquinas redondeadas, y añadir una sombra paralela.

Además, cuando el elemento <dialog> se muestra como modal (usando el método showModal()), tenemos un adicional pseudo-elemento, ::backdrop, a nuestra disposición. El elemento ::backdrop reside inmediatamente debajo del cuadro de diálogo, cubriendo toda la ventana gráfica y el resto de los elementos debajo.

Es común aplicar estilo al fondo con un color oscuro con baja opacidad-da click en el botón rojo para verlo en acción:

Añadir Elegancia con Transiciones

Personalizar los estilos del cuadro de diálogo debería ser sencillo, pero ¿que hay de añadir una transición CSS? ¿Cómo revelamos gradualmente el cuadro de diálogo, usando un efecto de escalado, más o menos como lo hace OS X?

Paso 1

Para comenzar, escalaremos el diálogo a 90%, especificamos la transición, y la ponemos fuera de vista.

dialog {
	visibility: hidden;
	transform: scale(0.1);
	transition: transform 200ms;
}

Paso 2

Ahora definimos un selector de clase que escalará el cuadro de diálogo a su tamaño deseado y lo hacemos visible.

dialog.dialog-scale {
	visibility: visible;
	transform: scale(1);
}

Paso 3

Ahora nuestro truco es que mantendremos el cuadro de diálogo a su escala pequeña por varios milisegundo antes de que agreguemos la clase dialog-scale. Para lograr ésto usamos el método setTimeout() de Javascript para agregar la clase:

var transition;

$accountDelete.on('click', function() {
	$accountDeleteDialog[0].showModal();
	transition = setTimeout(function() {
	    $accountDeleteDialog.addClass('dialog-scale');
	}, 0.5);
});

Paso 4

No olvidemos remover ésta clase y restablecer el timeOut cuando se cierre el cuadro de diálogo.

$('#cancel').on('click', function() {
	$accountDeleteDialog[0].close();
	$accountDeleteDialog.removeClass('dialog-scale');
	clearTimeout(transition);
});

¡Estamos listos! Puedes observarlo en el siguiente demo:

Terminando

El <dialog> es realmente útil, aunque no es muy soportado por navegadores aún. Cuando todos los principales navegadores lo hayan implementado, dependeremos menos de librerías, nuestra estructura de contenido será más semántica, propiamente accesible a tecnología asistencial, y tendremos una forma estándar de presentar cuadros de diálogo modales.

caniuse dialog — http://caniuse.com/#feat=dialog

Hasta entonces, puedes usar el polyfill de Google Chrome para simularlo en navegadores que no lo soportan.

Más Recursos

¡Sé el primero en conocer las nuevas traducciones–sigue @tutsplus_es en Twitter!