En este artículo tratamos de buscar la mejor alternativa a los cuadros de diálogo generados por javascript con las funciones alert(), confirm() y prompt() que, si bien cumplen su cometido, son bastante sosos, por decir lo mínimo.

 

Puedes descargar el plugin jqAlert actualizado desde https://github.com/eldesvandejose/jqAlert

Internet no está falto de soluciones alternativas. De hecho, desde que circulan frameworks tan geniales como jQuery o Bootstrap, las soluciones para esta y otras cuestiones surgen cómo setas, lo cual es bueno para todos nosotros, ya que, sin duda, siempre encontraremos el plugin adecuado.

Entre los más populares para el fin que perseguimos se encuentran SweetAlert y jAlert. El primero lo estuve probando y me dió bastantes problemas de funcionamiento. Lo integré en varias páginas, y en unas iba medio regular, en otras no cogía correctamente la configuración… Al final lo abandoné.

jAlert, en cambio ha demostrado ser muy eficiente y. lo que es mejor, muy cómodo de reprogramar, para que se adapte al contexto de cada desarrollo.

En este artículo, sin embargo, vamos a presentar jqAlert. Ha sido desarrollado por nosotros mismos, a partir de otros plugins localizados en distintos sitios de Internet, mejorando las prestaciones, subsanando fallos, y creando, en definitiva, un plugin eficiente, ligero y cómodo de usar.

EL PLUGIN jqAlert

El plugin jqAlert está basado, principalmente, en jQuery, aunque implementa funcionalidades de jQueryUI y Bootstrap (herramientas imprescindibles en la programación web moderna). En la imagen a continuación ves un cuadro de confirmación de ejemplo, sacado de uno de nuestros proyectos.

 Entre las características de este jqAlert se encuentran las siguientes:

• Por supuesto, bloquea la pantalla cómo las funciones tradicionales de JavaScript, impidiendo el acceso a los elementos de la misma mientras el cuadro esté en pantalla.
• Podemos contar con un overlay global que cubra la pantalla, del color que deseemos, y con el grado de transparencia que consideremos adecuado, para que los contenidos de la página queden semiocultos a la vista y el cuadro de diálogo destaque sobre todo.
• Podemos configurar el borde, el color de fondo, la clase de los botones (de las clases de botones de Bootstrap), la aparición o no de una barra de título en la parte superior, etc. Su aspecto se ciñe, por tanto, al del contexto dónde lo vayamos a integrar.
• Es dragable. El cuadro de diálogo se puede arrastrar en la página. Esto nos permite visualizar los contenidos (aunque sean intocables), si tenemos que tomar una decisión sobre el botón a pulsar.
• Podemos configurar que aparezca el cuadro con botón de aceptación, con botón de no aceptación, con los dos o con ninguno.
• Podemos configurar que la tecla esc del teclado cierre el cuadro de diálogo y nos devuelva a la página, o que no lo haga. Evidentemente, si hacemos que no aparezca ningún botón, deberemos activar la tecla esc, o no habrá ninguna forma de cerrar el cuadro.
• Podemos cambiar la configuración en los aspectos que nos convenga, de una página a otra, o de una ejecución a otra en la misma página, con mucha facilidad.
• Cuenta con la posibilidad de generar distintos modelos de cuadros de aviso, incluyendo un cuadro de acceso, con campos de Usuario y Contraseña.

Puedes descargarte este plugin de este enlace.

DEPENDENCIAS

Como cualquier plugin actual, jqAlert (y el nuestro en eso no es una excepción) necesita ciertas dependencias para funcionar correctamente. No obstante son elementos que forma parte de cualquier sitio web moderno, por lo que no tiene que haber mayor problema en incorporarlos a nuestra página:

• jQuery
• jQuery UI
• Bootstrap

Con esos tres elementos, ya podemos incluir nuestro plugin en la página y empezar a usarlo. El plugin en sí se compone un solo fichero, llamado jqAlert.js, y una carpeta con unos iconos complementarios para “decorar” un poco los cuadros de diálogo.

Hemos evitado la versión minimizada porque tampoco abultan tanto, y así son más cómodos para leer el código. El listado de jqAlert.js es el siguiente:

Puedes descargar el paquete entero de este enlace.

USANDO EL PLUGIN

Una vez importadas las dependencias y el plugin, tenemos que configurar las opciones que no queramos dejar por defecto. Por ejemplo, para establecer un overlay de color turquesa, con una opacidad del 50%, incluiremos, en el JavaScript las siguientes instruciones:

$.alertOptions.overlayColor = '#5bc5eb';
$.alertOptions.overlayOpacity = .5;

Para hacer saltar un Alert cómo respuesta a un evento, incluiremos las siguientes líneas:

jqAlert('Esto sustituye al alert', 'Barra de título', function() {
    console.log('Has cerrado el alert');
});

El código completo se llama prueba_alert.htm:

Se trata de un código muy sencillo, que muestra un botón. Si lo pulsas, salta el Alert de muestra. Cuando lo cierras, te vuelca un mensaje en la consola del navegador.

NOTA. Para visualizar la consola del navegador durante la ejecución de una página, pulsa CTRL-MAYS-J en Chrome, Opera o Firefox. En Explorer usa F-12.

Cuando cargas este script en el navegador (por supuesto, en el directorio donde lo tengas tienes también jqAlert.js y la carpeta con los iconos), y abres la consola, ves la página de la siguiente imagen:

En la parte superior izquierda, tienes un botón para disparar el cuadro de diálogo. Verás que te bloquea toda la página con una corrtinilla azul semitransparente, cómo hemos puesto en el código. Lo ves en la figura siguiente:

Cómo puedes comprobar tú mismo, el jqAlert es dragable. Puedes cogerlo con el ratón y arrastrarlo por la página. Cuando configuramos nuestro cuadro de diálogo sin barra de título (en seguida veremos cómo), se puede arrastrar cogiéndolo con el ratón por cualquier parte del cuadro en sí. Al pulsar el botón OK desaparece el cuadro de diálogo, se desbloquea la pantalla, y te vuelca en consola el mensaje programado, cómo ves a continuación:

OTRO EJEMPLO

A continuación te dejo un ejemplo que te muestra los distintos cuadros de diálogo y, según lo que pulses, te muesta la respuesta apropiada en la consola del navegador.

LA CONFIGURACIÓN

Hemos visto un breve ejemplo de prueba. Cómo ves en el código, lo primero que hemos hecho ha sido configurarlo de tal modo que aparezca una cortinilla azul semitransparente cubriendo los contenidos de la página. Vamos a ver todas las posibilidades de configuración.

 

OPCIÓN	VALOR POR DEFECTO	USO
verticalOffset	-75	Desplazamiento vertical con rrespecto a la parte media de la página, en píxeles.
horizontalOffset	0	Desplazamiento horizontal con respecto a la parte media de la página, en píxeles.
repositionOnResize	true	Reposicionamiento automático si se reescala la ventana mientras está activado el cuadro de diálogo.
overlayOpacity	.01	Nivel de opacidad de la cortinilla que cubre toda la página. (0 = invisible, 100 = totalmente opaca).
overlayColor	'#000'	Color de la cortinilla que cubre toda la página.
draggable	true	Si el cuadro de diálogo es dragable (requiere que tengas jQueryUI.draggable).
okButton	' OK '	Texto del botón de aceptación.
cancelButton	' Cancel '	Texto del botón de no aceptación.
dialogClass	null	Clase externa para los cuadros de diálogo.
useBootstrapClasses	true	Si se usan las clases de Bootstrap. Si no vamos a usarlas, aún así se pueden aplicar a los botones los valores default, primary, success, warning y danger, aunque el resultado no es tan eleborado cómo si se usa Bootstrap. Esta opción está para páginas que no empleen este framework CSS. Si tu página ya emplea Bootstrap, deberías mantener esta opción activada.
showConfirmButton	true	Si se muestra el botón de aceptación.
showCancelButton	true	Si se muestra el botón de cancelación (en los cuadros de confirmación y pregunta).
OK_Button_class	'success'	Sufijo de la clase Bootstrap para el botón de aceptación.
Cancel_Button_class	'danger'	Sufijo de la clase Bootstrap para el botón de cancelación.
window_backgroundColor	'#FFF'	Color de fondo del cuadro de diálogo.
window_border	'ridge 5px #999'	Borde del cuadro de diálogo.
window_corners	10	Radio de las esquinas del cuadro de diálogo.
closeOnEscape	false	Si se cerrará el cuadro de diálogo al pulsar la tecla esc.
label_user_auth	Usuario:	La etiqueta para el campo de usuario en los cuadros de autenticación.
label_pw_auth	Contraseña:	La etiqueta para el campo de contraseña en los cuadros de autenticación.
imagesPath	images/	La ruta en la que el plugin buscará las imágenes que necesita. La ruta es relativa a la ubicación de la página que llama al plugin, no a la ubicación del plugin en sí.

Las funciones para llamar a los distintos tipos de cuadros de diálogo son las siguientes:

Para los cuadros de Alerta (la sustitución de los tradicionales alert):

jqAlert (mensaje, título, callback(){
    // Función a ejecutar cuando se cierra el cuadro.
});

Para los cuadros de Confirmación (la sustitución de los tradicionales confirm).

jqConfirm (mensaje, título, callback(resultado){
    // Función a ejecutar cuando se cierra el cuadro.
    // El argumento vale true si se ha pulsado el botón de aceptación
    // o false, si se ha pulsado el de no aceptación.
});

Para los cuadros de Pregunta (la sustitución de los tradicionales prompt).

jqPrompt (mensaje, respuesta por defecto, título, callback(resultado){
    // La respuesta por defecto puede ser, si no deseas ofrecer ninguna,
    // una cadena vacía, pero el argumento debe estar.
    // Si se pulsa el botón de aceptación, el argumento de la función calllback
    // contiene lo que el usuario haya tecleado en el campo de respuesta.
    // Si se pulsa el botón de no aceptación, el argumento de callback contiene false.
});

Para los cuadros de autenticación:

jqAuth('Esto es un control de acceso', 'Acceso', function(acceso) {
    if (acceso){
        console.log('Usuario:' + acceso[0]);
        console.log('Contraseña:' + acceso[1]);
    } else {
        console.log("Has cancelado. Acceso denegado.");
    }
});

En los cuadros de autenticación, si el usuario pulsa el botón de no aceptación, la función callback devuelve un false. Si pulsa el botón de aceptación, la función devuelve una matriz. El primer elemento (el que tiene índice 0) contiene lo que se haya tecleado cómo usuario y el segundo (indice 1) lo que se haya tecleado cómo contraseña. A partír de ahí, se pueden enviar estos datos a un control de accesos, como formulario o por Ajax.

Además, este plugin tenía en origen otros tres cuadros, que se han conservado en esta revisión. Funcionan igual que el jqAlert(), pero mostrando diferentes iconos. Se llaman con jqWarning(), jqMessage() y jqError(), con la misma sintaxis que jqAlert().

 

ATENCIÓN. Hace unas líneas mencionábamos la posibilidad de que no hubiera barra de título en el cuadro de diálogo. Si, al invocar a estos métodos, en el argumento del título pones una cadena vacía, el cuadro se mostrará sin barra de título.

Y listo. Sólo me queda decirte que te descargues el plugin (que espero que ya lo habrás hecho) y que experimentes con él.

 

Puedes descargar el plugin jqAlert actualizado desde https://github.com/eldesvandejose/jqAlert