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.
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>
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>
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