Etiqueta <dialog>

En HTML moderno tenemos una etiqueta que nos permite crear mensajes emergentes sin tanto JavaScript.

La etiqueta <dialog> nos ayuda a crear diálogos de diferente naturaleza.

Con HTML puro

Cuando creamos un elemento con esta etiqueta, por defecto no se mostrará en la pantalla:

<dialog>Mi diálogo</dialog>

Si queremos que se muestre desde un inicio, podemos agregarle el atributo open:

<dialog open>Mi diálogo</dialog>

Usando JavaScript

Aunque esta etiqueta usualmente los queremos usar cuando se trata de mensajes que aparecen y desaparecen.

Lo podemos lograr agregando algunos elementos y un poco de JavaScript.

<button>Abrir diálogo</button>
<dialog>Mi diálogo</dialog>
<script>
  const button = document.querySelector("button");
  const dialog = document.querySelector("dialog");
  button.onclick = () => {
    dialog.show();
  };
</script>

Ahora tenemos un diálogo que se abre mediante un botón.

Aunque todavía nos falta cerrarlo de alguna manera. Una de las más fáciles es creando un formulario dentro del diálogo y agregarle el atributo method="dialog":

También podemos cerrarlo mediante JavaScript:

<button>Abrir diálogo</button>
<dialog>
  Mi diálogo
  <button id="close">X</button>
</dialog>
<script>
  const button = document.querySelector("button");
  const dialog = document.querySelector("dialog");
  const close = document.querySelector("#close");
  button.onclick = () => {
    dialog.show();
  };
  close.onclick = () => {
    dialog.close();
  };
</script>

Los diálogos tienen dos métodos para ser abiertos mediante código, una de ellas es la que acabamos de ver: open().

La otra es showModal(), que nos permite obstaculizar la vista detrás del diálogo:

<button>Abrir diálogo</button>
<dialog>
  Mi diálogo
  <button id="close">X</button>
</dialog>
<script>
  const button = document.querySelector("button");
  const dialog = document.querySelector("dialog");
  const close = document.querySelector("#close");
  button.onclick = () => {
    dialog.showModal();
  };
  close.onclick = () => {
    dialog.close();
  };
</script>

Otra de las diferencias es que podemos cerrar el diálogo utilizando la tecla Esc sin añadir código extra.

Sobre los estilos

Por defecto cuando el diálogo no se encuentra abierto, es afectado por display: none;. Cuando se abre utiliza display: block;.

Esto puede provocar que algunas animaciones no funcionen correctamente.

Por ejemplo, los estilos siguientes tratan de agregar animaciones al momento de abrir y cerrar el diálogo:

dialog {
  opacity: 0;
  transform: scaleY(0);
  transition:
    opacity 0.7s ease-out,
    transform 0.7s ease-out,
    overlay 0.7s ease-out allow-discrete,
    display 0.7s ease-out allow-discrete;
}

dialog[open] {
  opacity: 1;
  transform: scaleY(1);
}

dialog::backdrop {
  background-color: rgb(0 0 0 / 0%);
  transition:
    display 0.7s allow-discrete,
    overlay 0.7s allow-discrete,
    background-color 0.7s;
}

dialog[open]::backdrop {
  background-color: rgb(0 0 0 / 25%);
}

Por ahora sólo podemos ver la animación al momento de cerrar el diálogo a pesar de que estamos animando ambas.

Para hacer que funcione correctamente debemos agregar @starting-style:

@starting-style {
  dialog[open] {
    opacity: 0;
    transform: scaleY(0);
  }

  dialog[open]::backdrop {
    background-color: rgb(0 0 0 / 0%);
  }
}

<button>Abrir diálogo</button>
<dialog>
  Mi diálogo
  <button id="close">X</button>
</dialog>

const button = document.querySelector("button");
const dialog = document.querySelector("dialog");
const close = document.querySelector("#close");
button.onclick = () => {
  dialog.showModal();
};
close.onclick = () => {
  dialog.close();
};

dialog {
  opacity: 0;
  transform: scaleY(0);
  transition:
    opacity 0.7s ease-out,
    transform 0.7s ease-out,
    overlay 0.7s ease-out allow-discrete,
    display 0.7s ease-out allow-discrete;
}

dialog[open] {
  opacity: 1;
  transform: scaleY(1);
}

dialog::backdrop {
  background-color: rgb(0 0 0 / 0%);
  transition:
    display 0.7s allow-discrete,
    overlay 0.7s allow-discrete,
    background-color 0.7s;
}

dialog[open]::backdrop {
  background-color: rgb(0 0 0 / 25%);
}

@starting-style {
  dialog[open] {
    opacity: 0;
    transform: scaleY(0);
  }

  dialog[open]::backdrop {
    background-color: rgb(0 0 0 / 0%);
  }
}

Parte de este código lo podemos encontrar en la documentación oficial de la etiqueta <dialog>¹

Comentarios