Formularios emergentes para mensajes de confirmación y de entrada de datos

En JavaScript encontramos tres mensajes emergentes del objeto window que pueden ponerse como window.alert(), window.confirm(), window.prompt() o simplemente alert(), confirm(), prompt():

• window.alert(mensaje): pone en pantalla una cuadro con el mensaje y un botón aceptar. Se usa para alertar o informar al usuario sobre algún aspecto. Ejemplo El código es simplemente onclick="window.alert('Un mensaje')".
• var respuesta = window.confirm(mensaje): pone en pantalla un cuadro con el mensaje y los botones aceptar y cancelar, devolviendo true o false en la respuesta. Es de típico uso cuando damos al usuario dos alternativas para continuar por un lado u otro del código. Ejemplo usando un alert() para mostrar la respuesta. El código es onclick="window.alert('La repuesta ha sido ' + window.confirm('Un mensaje'))"
• var valor = window.prompt(título, mensaje): poner en pantalla un cuadro con el título, mensaje, botones aceptar y cancelar y un cuadro de texto donde podemos introducir un valor que luego estará disponible con el botón aceptar. Ejemplo

Estos mensajes del navegador tienen la característica de que detienen la ejecución de la página hasta que el usuario interaccione con el mensaje. Además con prompt los navegadores pueden bloquear esta ventana emergente por defecto. Por ejemplo, según como sean las opciones de configuración establecidas para las ventanas emergentes de Internet Explorer 8, éste avisa de que Este sitio web está usando una ventana emergente generada por script para solicitar información. Si confía en este sitio..., dando la posibilidad de acceder a mostrar esos mensajes para el resto de uso de esa página.

Los tres mensajes anteriores son susceptibles de ser utilizados con nuestros formularios emergentes. La implantación de algo similar a window.alert() con nuestro mensaje emergente es fácil:

Para obligar al usuario a que interaccione sólo con el emergente, le dotamos de una pantalla de transparencia. Recordemos que de esta forma sólo puede haber un formulario emergente abierto y sin posibilidad de acceder al resto de la página. El formulario emergeAlert es una instancia de la clase formEmerge, cuyo constructor se ubica en un script en la cabecera de esta página (puede consultar el código con el menú de los navegadores):

...
var emergeAlert = null;
...
window.onload = function() {
    emergeAlert = new formEmerge("emergeAlert", "Mensajes", true);
    ...
}

Luego sólo es necesario llamar al método abrir() con los argumentos apropiados, como hacemos con este emergeAlert dentro del evento onclick de un botón:

<input type="button"  value="window.alert"
onclick="emergeAlert.abrir('Un mensaje', 'window.alert', this.offsetLeft,
this.offsetTop + this.offsetHeight)"
/>

Sin embargo para conseguir una detención dentro de la ejecución de un script y simular mensajes como window.confirm o window.prompt hemos de usar un recurso diferente. Podemos simular que la ejecución del mensaje se produce en dos partes, una hasta la presentación del mismo y luego se reanuda cuando el usuario pulsa aceptar, cancelar o cerrar en el mensaje emergente. Hacemos uso de los eventos del formulario emergente para conseguir este efecto.

Eventos de un formulario emergente

Para hacer como window.confirm() hemos de detener la ejecución y reanudarla tras pulsar algún botón del formulario. Este es el ejemplo:

El botón que abre el emergente es:

Ejemplo para hacer como <code>window.confirm()</code>:
<input type="button" value="window.confirm"
onclick="emergeConfirm.abrir('Un mensaje', 'window.confirm',
this.offsetLeft, this.offsetTop + this.offsetHeight)"
/>
    

Usamos otra instancia emergeConfirm también declarada en el window.onload en un script de la cabecera de esta página:

...
var emergeConfirm = null;
...
window.onload = function() {
    ...
    emergeConfirm = new formEmerge("emergeConfirm", "", true, 2);
    //Activamos los eventos
    emergeConfirm.eventoAceptar = true;
    emergeConfirm.ejecutaEventoAceptar = function (){
        alert("La respuesta ha sido: " + (emergeConfirm.botonPulsado == "aceptar"));
    }
    emergeConfirm.eventoCancelar = true;
    emergeConfirm.ejecutaEventoCancelar = function (){
        alert("La respuesta ha sido: " + (emergeConfirm.botonPulsado == "aceptar"));
    }
    emergeConfirm.eventoCerrar = true;
    emergeConfirm.ejecutaEventoCerrar = function (){
        alert("La respuesta ha sido: " + (emergeConfirm.botonPulsado == "aceptar"));
    }
    ...
}

La clase del formulario emergente dispone de la propiedad botonPulsado que almacena "aceptar", "cancelar", "aplicar" o "cerrar" cuando alguno de los botones respectivos es pulsado. Lo que hacemos comparar el valor con "aceptar" y devolver ese booleano para que actúe de forma similar al ejemplo con window.confirm().

El emergente dispone de las propiedades this.eventoAceptar, this.eventoCancelar y this.eventoCerrar inicialmente con valor false. También se declaran una función anónima para cada uno: this.ejecutaEventoAceptar = function(){} y lo mismos para los otros dos. Así poniendo a true un evento y sobreescribiendo la función anónima podemos hacer que se ejecute algo tras pulsar uno de los botones del formulario.

Este es un ejemplo de un mensaje emergente que actúa de forma similiar a window.prompt():

Este ejemplo es muy similar, pero cuando abramos el formulario debemos situar el foco en el cuadro de texto del interior:

<input type="button" value="window.prompt"
onclick="emergePrompt.abrir('', 'window.prompt', this.offsetLeft,
this.offsetTop + this.offsetHeight, '','','', 0)"
/>

La creación del emergente es igual que para el ejemplo anterior, a excepción de que hemos de construir el interior con un cuadro de texto. Ya vimos en el tema anterior como hacerlo. En resumen se trata de generar un "onfocus" para cuando se abra el formulario se situe el foco ahí y así pasar su valor a la respuesta. Si luego modificamos ese valor, al salir ("onblur") también se modifica esa respuesta, la cual luego obtendremos en la función ejecutaEventoAceptar cuando pulsemos el botón aceptar. Con cancelar o salir la respuesta será una cadena vacía (en lugar de un null que ofrecía el window.prompt de JavaScript):

var emergePrompt = null;
...
//Carga de la página, donde creamos ese formulario emergente
window.onload = function() {
    ...
    emergePrompt = new formEmerge("emergePrompt", "", true, 2);
    var interiorPrompt = "Una entrada: <input type = 'text' " +
    "value = 'Un valor' " +
    "onfocus = 'emergePrompt.respuesta = this.value' " +
    "onblur = 'emergePrompt.respuesta = this.value' " +
    " />";    
    emergePrompt.nuevoInterior(interiorPrompt);
    //Activamos los eventos
    emergePrompt.eventoAceptar = true;
    emergePrompt.ejecutaEventoAceptar = function (){
        alert("Ha introducido: " + emergePrompt.respuesta);
    }
    emergePrompt.eventoCancelar = true;
    emergePrompt.ejecutaEventoCancelar = function (){
        alert("Ha introducido: " + emergePrompt.respuesta);
    }
    emergePrompt.eventoCerrar = true;
    emergePrompt.ejecutaEventoCerrar = function (){
        alert("Ha introducido: " + emergePrompt.respuesta);
    }
    ...
}

Hay disponible los eventos abrir, aceptar, aplicar, cancelar y cerrar. Todos ellos funcionan igual, se activan con instancia.eventoX = true y la función es instancia.ejecutaEventoX = function(){}, donde "instancia" es la del formulario emergente creado y "X" será alguno de los citados "Abrir, Aceptar, Aplicar, Cancelar o Cerrar".