Cuadros de diálogo

En esta página se muestran ejemplos de cuadros de diálogo HTML, elemento <dialog>, tanto modales como no nodales. Un cuadro de diálogo modal, cuando está visible, no permite la interacción con el resto de la página web, mientras que un cuadro de diálogo no modal, sí permite que se interactúe con él y con el resto de la página web siendo éste ya visible.

Se debe destacar que para poder usar cuadros de manera que estos saquen su mayor potencial, se necesita emplear JavaScript, ya que estos deben responder a ciertas acciones. La esencial es poder mostrarse (open), además de, por supuestos, poder ocultarse o cerrarse (close).

Ejemplo de un cuadro de diálogo con solo HTML

Como se puede comprobar, aparece directamente en la página dado que tiene incluido el atributo open, y dado que solamente es HTML no tiene ningún efecto si se pulsa su botón "Aceptar".

Para volver a mostrarlo se debe eplear JavaScript, como por ejemplo con la función que se llama al pulsar el botón "Mostrar diálogo".

HTML

<dialog open>
<p>¡Saludos!</p>
<form method="dialog">
  <button type="button">Aceptar</button>
</form>
</dialog>

JavaScript

function showDialog1() {
  let dialog1 = document.getElementById("dialog1");
  dialog1.show();
}

Cuadro de diálogo modal

Los cuadros de diálog

<HTML>

<dialog id="dialogModal">
  <p>¡Saludos! soy un cuadro de diálogo modal</p>
  <form method="dialog">
    <button type="submit">Aceptar</button>
  </form>
</dialog>

<script>

function showModalDialog() {
  let dialogModal = document.getElementById("dialogModal");
  dialogModal.showModal();
}

Inicio