¿Alguna vez has necesitado crear una ventana modal o un cuadro de diálogo interactivo en tu página web? La etiqueta HTML dialog, entre las etiquetas básicas en HTML, es la herramienta perfecta para ello. En este artículo, vamos a explorar en detalle cómo usar la etiqueta HTML dialog para crear modales y diálogos que mejoren la experiencia del usuario en tu sitio web. Vamos a cubrir desde los conceptos básicos hasta ejemplos prácticos, todo en un tono levemente informal para que puedas entenderlo fácilmente.

¿Qué encontrarás en este post?

¿Qué es la etiqueta HTML dialog?

La etiqueta HTML dialog, pese a no ser una etiqueta de texto en HTML, representa un cuadro de diálogo modal o no modal, u otro componente interactivo, como una alerta desechable, un inspector o una subventana. Esta etiqueta permite a los desarrolladores crear ventanas emergentes que pueden contener formularios, mensajes o cualquier otro contenido que necesite destacarse del resto de la página.

Modal vs. no modal

Los cuadros de diálogo modales interrumpen la interacción con el resto de la página, haciéndola inerte mientras el diálogo está activo. En cambio, los cuadros de diálogo no modales permiten la interacción con el resto de la página. Esto es útil cuando necesitas mostrar información adicional sin bloquear la interacción del usuario con el contenido principal de la página.

Cómo mostrar un diálogo en HTML

Para mostrar un diálogo en HTML, debemos usar JavaScript. Aquí tienes los métodos más importantes:

.showModal(): Muestra un cuadro de diálogo modal.
.show(): Muestra un cuadro de diálogo no modal.
.close(): Cierra el cuadro de diálogo.

Atributos del elemento dialog

El elemento dialog incluye varios atributos globales. Aquí hay uno importante:

open: Indica que el cuadro de diálogo está activo y disponible para la interacción. Si este atributo no está configurado, el cuadro de diálogo no será visible para el usuario. Es recomendable usar los métodos .show() o .showModal() para mostrar los diálogos en lugar del atributo open.

Advertencia: No se debe usar el atributo tabindex en el elemento dialog. Consulta las notas de uso para más detalles.

Ejemplos prácticos de uso del HTML dialog

Creación de un diálogo no modal con HTML

Este ejemplo demuestra cómo crear un cuadro de diálogo no modal utilizando solo HTML:

//HTML dialog
<dialog open>
  <p>¡Saludos a todos!</p>
  <form method="dialog">
    <button>OK</button>
  </form>
</dialog>

En este caso, el cuadro de diálogo está abierto inicialmente debido a la presencia del atributo open. Los cuadros de diálogo mostrados con este atributo son no modales. Después de hacer clic en «OK», el cuadro de diálogo se cierra.

Creación de un diálogo modal

Vamos a ver cómo crear un cuadro de diálogo modal con un fondo de gradiente. Usaremos JavaScript para abrir y cerrar el cuadro de diálogo:

//HTML dialog
<dialog>
  <button autofocus>Close</button>
  <p>¡Este cuadro de diálogo modal tiene un fondo genial!</p>
</dialog>
<button>Show the dialog</button>

::backdrop {
  background-image: linear-gradient(45deg, magenta, rebeccapurple, dodgerblue, green);
  opacity: 0.75;
}

//HTML dialog
const dialog = document.querySelector("dialog");
const showButton = document.querySelector("dialog + button");
const closeButton = document.querySelector("dialog button");

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

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

En este ejemplo, el cuadro de diálogo se abre modalmente cuando se hace clic en el botón «Show the dialog». El cuadro de diálogo puede cerrarse presionando la tecla Esc o haciendo clic en el botón «Close» dentro del diálogo.

Manejo del valor de retorno del cuadro de diálogo

El siguiente ejemplo muestra cómo manejar el valor de retorno del elemento dialog y cómo cerrar un cuadro de diálogo modal utilizando un formulario:

<dialog id="favDialog">
  <form method="dialog">
    <p>
      <label>
        Favorite animal:
        <select>
          <option value="default">Choose…</option>
          <option>Brine shrimp</option>
          <option>Red panda</option>
          <option>Spider monkey</option>
        </select>
      </label>
    </p>
    <div>
      <button value="cancel">Cancel</button>
      <button id="confirmBtn" value="default">Confirm</button>
    </div>
  </form>
</dialog>
<button id="showDialog">Show the dialog</button>
<output></output>

const showButton = document.getElementById("showDialog");
const favDialog = document.getElementById("favDialog");
const outputBox = document.querySelector("output");
const selectEl = favDialog.querySelector("select");
const confirmBtn = favDialog.querySelector("#confirmBtn");

showButton.addEventListener("click", () => {
  favDialog.showModal();
});

selectEl.addEventListener("change", () => {
  confirmBtn.value = selectEl.value;
});

favDialog.addEventListener("close", () => {
  outputBox.value =
    favDialog.returnValue === "default"
      ? "No return value."
      : `ReturnValue: ${favDialog.returnValue}.`;
});

En este ejemplo, el cuadro de diálogo contiene un formulario con un select y dos botones. Al seleccionar una opción y hacer clic en «Confirm», el valor de retorno se muestra bajo el botón «Show the dialog». Si se cierra el cuadro de diálogo presionando el botón «Cancel», el valor de retorno es cancel.

Consejos y mejores prácticas

Usabilidad: Asegúrate de proporcionar mecanismos claros para cerrar el cuadro de diálogo, como un botón de cierre visible.
Accesibilidad: Añade el atributo autofocus al elemento que el usuario debe interactuar primero. Evita usar tabindex en el elemento dialog.
Estilización: Usa el pseudo-elemento ::backdrop para estilizar el fondo de un cuadro de diálogo modal y proporcionar una mejor experiencia visual.

La etiqueta HTML dialog es una herramienta poderosa para crear cuadros de diálogo interactivos y modales en tus páginas web. Su uso adecuado puede mejorar significativamente la experiencia del usuario, proporcionando interfaces más dinámicas y atractivas.

Si te ha gustado este artículo y quieres seguir aprendiendo sobre desarrollo web, te invitamos a unirte a nuestro Bootcamp en Desarrollo Web. En KeepCoding, no solo aprenderás los fundamentos del desarrollo web, sino que también adquirirás habilidades prácticas que te prepararán para una carrera exitosa en el sector tecnológico. ¡No pierdas la oportunidad de transformar tu vida y asegurar tu futuro en una industria en constante crecimiento!