Formulario modal
Crea una función showPrompt(html, callback) que muestre un formulario con el mensaje html, un campo input y botones OK/CANCELAR.
- Un usuario debe escribir algo en el campo de texto y pulsar Enter o el botón OK, entonces
callback(value)es llamado con el valor introducido. - En caso contrario, si el usuario pulsa Esc o CANCELAR, entonces
callback(null)es llamado.
En ambos casos se finaliza el proceso se y borra el formulario.
Requisitos:
- El formulario debe estar en el centro de la ventana.
- El formulario es modal. Es decir que no habrá interacción con el resto de la página, siempre que sea posible, hasta que el usuario lo cierre.
- Cuando se muestra el formulario, el foco debe estar en el
<input>del usuario. - Las teclas Tab/Shift+Tab deben alternar el foco entre los diferentes campos del formulario, no se permite cambiar el foco a otros elementos de la página.
Ejemplo de uso:
showPrompt("Escribe algo<br>...inteligente :)", function(value) {
alert(value);
});Demo en el iframe:
P.S. El código fuente tiene el HTML/CSS para el formulario con posición fija. Pero tú decides cómo haces el modal.
Una ventana modal puede ser implementada utilizando un <div id="cover-div"> semi-transparente que cubra completamente la ventana, como a continuación:
#cover-div {
position: fixed;
top: 0;
left: 0;
z-index: 9000;
width: 100%;
height: 100%;
background-color: gray;
opacity: 0.3;
}Debido a que el <div> cubre toda la ventana, recibe todos los clicks, en vez de la página tras él.
También podemos evitar el scroll en la página utilizando body.style.overflowY='hidden'.
El formulario no debe estar en el <div> sino junto a él, porque no queremos que tenga opacity.