regresar a la lección

Formulario modal

importancia: 5

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.

Abrir un entorno controlado para la tarea.

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.

Abrir la solución en un entorno controlado.