Cuadro de diálogo

Los scripts de una página web pueden comunicarse con el usuario para mostrar mensajes mediante el cuadro alert y pueden recibir entradas del usuario mediante prompt  o usando formularios form

HTML presenta un elemento que permite aunar alert con promp y formularios. Se trata del bloque dialog, si bien para aprovecharlo al máximo es necesario utilizar al menos un script.

El cuadro o bloque dialog es una alternativa muy flexible a los alert y prompt usados por javascript

Interaccionando con los usuarios: HTML dialog

La marca <dialog></dialog> crea un bloque para mostrar mensajes en la página web y recoger respuestas del usuario. Las respuestas pueden ser procesadas por javascript.

Este nodo tiene un atributo: open, cuando exsite el bloque se muestra en la ventana del navegador. Habitualemnte contiene algún botón como aceptar, ok, cerrar, abortar o el que quieras ponerle dentro. Al pulsar cualquiera de ellos el cuadro de diálogo se cerrará.

Para utilizar este cuadro necesitamos de Javascript. Es bien fácil:

  • El dialogo se abre
  • Muestra su contenido con algún botón
  • El cuadro se cierra al pulsar el botón.

Para que funcione de esta manera se necesita usar eventos que llamen al script para abrir o cerrar la ventana.

Lo mejor para ver su funcionamiento es un ejemplo.

<button onclick="abrir()">Abrir dialogo </button>

<button onclick="cerrar()">

  Cerrar dialogo </button>

  <dialog id="msg">

   ¿Hola, esta es una ventana muy simple

  </dialog>

<script>

function abrir(){

let dlg = document.getElementById("msg");

dlg.show();

}

function cerrar(){

 let dlg = document.getElementById("msg");

 dlg.close();

}

</script>

Ejemplo mínimo de un bloque details - summary.

Este ejemplo tan solo abre o cierra la ventana de diálogo.

Para Javascript este elemento es un objeto que puede mostrarse show(), mostrarse como modal showModal() y cerrarse close(). Y sus propiedades son el atributo open para mostrar su estado (visible u oculto) y returnValue, valor devuelto según el botón pulsado si se usa con un elmento form.

<button onclick="abrir()">Abrir dialogo </button>

<div id="respuesta"></div>

<dialog id="msg" onclose="resultado()">

  ¿Cuál es tu color preferido?

   <form method="dialog">

    <button value="rojo">Rojo</button>

    <button value="azul">Azul</button>

  </form>

</dialog>

<script>

function abrir(){

let dlg = document.getElementById("msg");

dlg.show();

}

function resultado(){

let dlg = document.getElementById("msg");

let resp = document.getElementById("respuesta");

resp.innerHTML = dlg.returnValue;

}

</script>

Un ejemplo más elaborado con respuesta desde el diálogo.

En este otro ejemplo el script recoge un valor dependiendo del botón pulsado. Como ves se usa un form con el atrobuto method="dialog". Esto facilita el procesamiento de las ventans de diálogo

El cuadro de diálogo se va a suar normalmente con un script. Los eventos que soporta este elemento HTML son close y cancel (disparado si salimos del cuadro con la tecla ESC en modo modal.