Crea ventanas modales de forma sencilla con el elemento HTML Dialog

Seguro que cuando has diseñado una web, en más de una ocasión has tenido que construir una ventana modal. Este tipo de elemento se diferencia de los típicos pop ups o ventanas emergentes en que no aparecen de forma automática, sino que es el propio usuario el que tiene que clicar en alguna parte de la web (normalmente un botón) para que aparezca. Hasta ahora, para crear ventanas modales, era necesario escribir usar Javascript, o usar algún plugin para WordPress. Pero gracias al elemento dialog podemos prescindir totalmente de Javascript y hacerlo todo usando solo HTML.

Este elemento HTML dialog hace poco tiempo que podemos usarlo de forma normal en nuestros proyectos, ya que es compatible con la mayoría de los navegadores modernos (a excepción de Internet Explorer) como podemos comprobar en Can I Use. Por supuesto, no va a ser colocar la etiqueta dialog a nuestro contenido y automáticamente obtener una ventana modal, y por eso hemos querido escribir este artículo. Veremos como insertar este elemento en nuestro código, que atributos podemos añadirle según queremos que sea su funcionamiento, y algunos trucos para darle estilo mediante CSS.

Las ventanas modales nos sirven para multitud de cosas. Desde mostrar un formulario, ampliar información que se esta mostrando o que aparezca un video en primer plano. Y es que es el uso que le vamos a dar a las ventanas modales: hacer que cierta información se ponga en primer plano en nuestra pantalla para captar la atención del usuario, dejando en un segundo plano el resto.

Pero antes que nada, empecemos por lo básico. Eso sí, si el HTML no es tu fuerte, te recomendamos echar un vistazo a nuestro artículo sobre los conceptos esenciales de HTML. Aunque aquí trataremos de explicar todo al máximo detalle, te vendrá bastante bien empezar con cierta base de conocimientos. También os recomendamos que una buena forma de hacer la lectura más amena, es que vayáis escribiendo el código que vamos mostrando en el artículo, ya sea en Codepen o de forma local. No solo veréis de forma directa los resultados, sino que afianzará mucho mejor todos los detalles que veamos.

¿Cómo funciona el elemento Dialog?

El elemento de HTML dialog, como muchos otros elementos HTML, tiene una etiqueta de apertura y otra de cierre. Y entre estas dos etiquetas insertaremos nuestro contenido, que puede ser de cualquier tipo: texto, imágenes, formularios, video… Vamos a hacer algo simple:

<dialog>
   <h2>Este es el título de mi ventana modal</h2>
   <p>Este es un texto de ejemplo dentro de una ventana modal</p>
</dialog>

Si escribimos esto, no va a aparecer nada en nuestro navegador. No nos asustemos, esta todo bien. Es que dialog, por defecto, está oculto. Para mostrarlo, solo hay que añadirle el atributo open, quedando algo así:

<dialog open>
   <h2>Este es el título de mi ventana modal</h2>
   <p>Este es un texto de ejemplo dentro de una ventana modal</p><
</dialog>

Si en vez de usar el atributo open usamos close, volveremos al punto inicial. Es decir, si no le asignamos ningún atributo a dialog, por defecto funciona igual que como si tuviese el atributo close. Muy bien todo, pero esto no es lo que queremos, ya que no es interactivo de ninguna manera. Nuestra meta es que el contenido dentro de dialog lo pueda mostrar y/o ocultar el usuario a su antojo. Así que vamos a ver la estructura HTML mínima necesaria para construir todo esto.

Estructura HTML necesaria para crear una ventana modal con Dialog

Básicamente vamos a necesitar tres elementos:

• El elemento dialog que hemos visto en el apartado anterior, y que va a albergar el contenido de nuestra ventana modal.
• Un elemento que nos sirva para abrir la ventana modal, que llamaremos elemento de apertura.
• Y otro elemento que nos sirva para cerrar nuestra ventana modal, que llamaremos elemento de cierre.

Con estos tres objetos ya tenemos un mínimo para que, haciendo clic en el elemento de apertura aparezca el contenido que hemos insertado dentro de dialog. Y haciendo clic en el elemento de cierre, ocultaremos este contenido. Para hacer estos elementos de apertura y cierre vamos a usar botones, ya que por el tipo de funcionalidad es lo más recomendable. Y como queremos que, por defecto, el contenido dentro de dialog no se muestre (queremos que el usuario sea el que lo abra), nos olvidaremos por ahora del atributo open.

Otro dato a tener en cuenta es la posición del elemento de cierre dentro de la estructura de nuestro HTML. Una vez abierta la ventana modal, al colocarse en primer plano, si queremos cerrarla necesitamos que el elemento de cierre también este en primer plano para poder acceder a él. Es por ello que es necesario que lo coloquemos este elemento de cierre dentro de dialog. También vamos a añadirle una id a nuestro dialog que nos será de utilidad más adelante.En definitiva, vamos a tener este código.

<button>Abrir ventana modal</button>

<dialog id="modal">
   <h2>Este es el título de mi ventana modal</h2>
   <p>Este es un texto de ejemplo dentro de una ventana modal</p>
   <button>Cerrar</button>
</dialog>

Si habéis escrito esto veréis que al hacer clic en el botón Abrir ventana modal no ocurre nada. Y es lo normal ya que aun no hemos definido, por un lado, cual es la acción que debe hacer ese botón al clicarle. Y por otro, que contenido debe mostrar. Porque es posible que tengamos varios elementos dialog en nuestra web mostrando contenidos diferente. Y aquí es donde veremos los atributos de los botones de apertura y cierre.

Atributo y valores de los elementos HTML de apertura y cierre

Para poder abrir y cerrar vamos a trabajar con el atributo onclick dentro de los botones. Y a este atributo le vamos designar alguno de estos tres valores, según sea la función que queramos que cumplan:

• .close() - al hacer clic en el elemento que lleve este atributo, cerrará el elemento dialog.
• .show() - al hacer clic en el elemento que lleve este atributo, abrirá el elemento dialog.
• .showModal() - al hacer clic en el elemento que lleve este atributo, abrirá el elemento dialog, bloqueando la interacción con el resto de elementos.

La principal diferencia entre .show() y .showModal() es que, mientras que el primero, al estar abierta la ventana modal, nos va a dejar seguir interactuando con el resto de la web, la segunda va a bloquear todo el contenido que no sea el que esté dentro de la ventana modal. Personalmente prefiero usar el valor .showModal() en mi elemento de apertura, ya que le va a dar a la ventana modal la importancia que busco: la de una información que se coloca por encima del resto de la web. Si queréis ampliar más en esto, es recomendable visitar la documentación de Mozilla sobre dialog, que amplía todo es tema. En fin, no demos más vueltas y veamos como quedaría nuestro código:

<button onclick="window.modal.showModal();">Abrir ventana modal</button>

<dialog id="modal">
   <h2>Este es el título de mi ventana modal</h2>
   <p>Este es un texto de ejemplo dentro de una ventana modal</p>
   <button onclick="window.modal.close();">Cerrar</button>
</dialog>

Como os habréis dado cuenta los valores del atributo onclick no son exactamente iguales a los que hemos visto antes. Y es que le hemos añadido la id con la que nombramos anteriormente a nuestro dialog. Esto nos sirve para que, al hacer clic en botón, sepa que dialog exacto es el que nos debe mostrar. Porque aunque aquí solo estamos usando uno para hacerlo más sencillo, es posible que tengamos varios en nuestro diseño. Si por ejemplo tenemos dos, usaremos una id diferente para cada dialog, y cambiaremos los valores de los atributos en consonancia.

<button onclick="window.modal1.showModal();">Abrir ventana modal</button>

<dialog id="modal1">
   <h2>Este es el título de mi ventana modal</h2>
   <p>Este es un texto de ejemplo dentro de una ventana modal</p>
   <button onclick="window.modal1.close();">Cerrar</button>
</dialog>

<button onclick="window.modal2.showModal();">Abrir ventana modal</button>

<dialog id="modal1">
   <h2>Este es el título de mi ventana modal</h2>
   <p>Este es un texto de ejemplo dentro de una ventana modal</p>
   <button onclick="window.modal2.close();">Cerrar</button>
</dialog>

Con esto casi que podemos dar por terminado el artículo, ya que solo nos quedaría dar estilo con CSS. Pero hablando de CSS, con dialog tenemos un pseudo-elemento que podemos usar y que seguro nos será de utilidad.

Pseudo-elemento CSS para dialog para dar estilo

Si habéis estado haciendo vuestro propio ejemplo de ventana modal, habréis notado que al usar con el atributo onclick el valor .showModal(), el fondo de la web pasaba a tener un sombreado grisáceo transparente que ayuda a darle más importancia a la ventana modal. Pero gracias al pseudo-elemento ::backdrop podemos cambiar la tonalidad y buscar un color que se ajuste más a nuestro diseño. En mi caso, quiero que sea un tono violeta:

dialog::backdrop {
  background: rgba(234, 206, 227, 0.9);
}

A partir de aquí, podemos jugar con este pseudo-elemento y el color de fondo todo lo que queramos: cambiar la transparencia, usar gradientes, insertar un patrón... Todo lo que necesite vuestro proyecto.

Aprovechamos para dejaros por aquí nuestro ejemplo en Codepen para que podáis ver el código con más detenimiento, y editarlo para poder experimentar con él.

Conclusiones

Como hemos podido ver, simplemente usando HTML podemos crear una ventana modal totalmente funcional en nuestra web, sin necesidad de Javascript ni de plugins externos gracias al elemento dialog. Sabiendo su como generar y ordenar una estructura básica, y los atributos y valores a usar, es cuestión de minutos tener montada nuestra propia ventana modal que podemos usar para mostrar un formulario de inscripción, información extra sobre un miembro de nuestra empresa o cualquier otro contenido que queramos que se muestre en primer plano simplemente haciendo clic en un botón.

Y gracias a la amplia compatibilidad que ofrece la gran mayoría de navegadores web modernos, podemos usar e implementar dialog de forma normal en nuestros proyectos cuando queramos que aparezcan ventanas modales. Todo son ventajas: facilidad en el momento de programar y menos carga en nuestra web.

Con esto acabamos por hoy, como siempre, tenéis disponibles los comentarios para hacernos llegar vuestras sugerencias, dudas y experiencias sobre este tema.