¿Qué son los modales?

Estamos acostumbrados a utilizar aplicaciones que muestran pantallas o mensajes que se sobreponen a lo que estamos haciendo.

En los videojuegos se ve como un menú de pausa. En las apps podría ser un mensaje de advertencia para preguntarte si estás seguro de la acción que estás a punto de realizar.

En la web a ese tipo de pantallas les llamamos modales. Cambian el “modo” o el estado de lo que está sucediendo en la interfaz.

Volviendo al ejemplo de los videojuegos, en un menú de pausa sólo puedes hacer acciones que corresponden a él. Es decir, ya no puedes seguir moviendo tu personaje (modo juego) pero sí puedes cambiar los ajustes o incluso salir a otros menús (modo pausa).

Creando nuestro primer modal

Son muy fáciles de implementar en nuestras aplicaciones web hoy en día. Existe una etiqueta HTML dedicada para esto y con un par de líneas de JavaScript funcionan como esperaríamos.

Para esta demostración crearemos un botón que abra el modal. Pero dependiendo del caso, el modal podría ser abierto de diferentes maneras.

<button>Abrir modal</button>

Ahora veamos el código que nos interesa.

Para crear el modal debemos usar la etiqueta <dialog> con prácticamente cualquier contenido.

<dialog>
  <!-- Contenido del modal -->
</dialog>

Por ejemplo:

<dialog>
  <h2>Modal</h2>
  <p>Este es un modal</p>
</dialog>

Ahora agregamos un poco de JavaScript para que el modal se abra cuando se haga clic en el botón:

const button = document.querySelector("button");
const dialog = document.querySelector("dialog");

button.addEventListener("click", () => {
  dialog.showModal();
});

En realidad, <dialog> contiene dos métodos para ser abierto: showModal() y show().

La versión modal se sobrepone al resto del contenido de la página, haciendo que no se pueda interactuar con el contenido que está detrás de ellos.

Mientras que la versión normal te permite seguir interactuando con el resto de la página.

Otra diferencia es que la versión modal nos permite cerrar diálogos mediante la tecla Esc.

Y también hay varias maneras de crear nuestro propio botón de cerrar.

Formas de cerrar un modal

Usando un formulario

Una de las más sencillas es crear un formulario dentro del modal y agregarle el atributo method="dialog":

<dialog>
  <h2>Modal</h2>
  <p>Este es un modal</p>
  <form method="dialog">
    <button>X</button>
  </form>
</dialog>

Aunque un problema con esto es que cualquier botón dentro del formulario hará que se cierre el modal.

Usando el método close()

Para tener un control más preciso, podemos utilizar el método close() de <dialog>:

<button>Abrir modal</button>
<dialog>
  <h2>Modal</h2>
  <p>Este es un modal</p>
  <button id="close-button">X</button>
</dialog>

Y finalmente, añadimos un poco de JavaScript para que el modal se cierre cuando se haga clic en el botón:

const button = document.querySelector("button");
const dialog = document.querySelector("dialog");
const closeButton = document.querySelector("#close-button");

button.addEventListener("click", () => {
  dialog.showModal();
});

closeButton.addEventListener("click", () => {
  dialog.close();
});

Usando el atributo open

Otra forma de abrir un modal es utilizando el atributo open:

// ...
closeButton.addEventListener("click", () => {
  dialog.open = false;
});

Aunque esta es la menos recomendada¹ ya que puede interferir con los eventos de apertura y cierre del modal.

Estilizando nuestros modales

El elemento <dialog> consta de dos partes importantes: la caja del modal y el fondo en el que se sobrepone.

La caja del modal se puede estilizar como cualquier otro elemento HTML.

dialog {
  background-color: royalblue;
  color: white;
  border: none;
  border-radius: 1rem;
  font-family: monospace;
  box-shadow: 0 0 0.5rem 0 rgba(0, 0, 0, 0.5);
}

Para el fondo, podemos utilizar el pseudo-elemento ::backdrop.

dialog::backdrop {
  background-color: rgba(0, 0, 255, 0.5);
}

De esta manera podemos crear interfaces sobrepuestas de una manera sencilla, lo que lleva más tiempo y esfuerzo es crear las pantallas que usaremos en nuestras aplicaciones.

Comentarios

Compartir