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.
![]() |
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.

Un cuadro de confirmación
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 teclaesc
, 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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 |
(function($) { $.alertOptions = { /* A continuación se definen las propiedades de configuración del plugin. Dentro del código serán accesibles mediante $.alertOptions.Propiedad. */ verticalOffset: -75, // Desplazamiento vertival del cuadro de diálogo con respecto a la mitad de la pantalla. // Negativo es hacia arriba y positivo es hacia abajo. horizontalOffset: 0, // Desplazamiento horizontal del cuadro de diálogo con respecto al centro de la pantalla. repositionOnResize: true, // Si está activado, centra el cuador de diálogo a las posiciones relativas cuando se reescala la pantalla. overlayOpacity: .01, // Opacidad de la capa de overlay (la que cubre toda la pantalla). Por defecto es transparente. overlayColor: '#000', // Color de la capa de overlay. draggable: true, // Hace que el cuadro de diálogo sea draggable. (requiere la funcionalidad draggable de jQuery UI) okButton: ' OK ', // Texto del botón de aceptación cancelButton: ' Cancel ', // Texto del botón de NO aceptación. dialogClass: null, // Una clase genérica para todos los díalogos. showConfirmButton: true, // Si se mostrará el botón de aceptación. showCancelButton: true, // Si se mostrará elbotón de no aceptación OK_Button_class: 'success', // Clase para el boton de aceptación. Cancel_Button_class: 'danger', // Clase para el boton de no aceptació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. cancelOnEscape: false, // Cerrar el cuadro de diálogo con 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/', // Las imágenes hay que buscarlas en la ruta especifcada. /* MÉTODOS PÚBLICOS */ alert: function(message, title, callbackFunction) { if (title == null) title = ''; $.alertOptions._show(title, message, null, 'alert', function(result) { if (callbackFunction) callbackFunction(result); }); }, confirm: function(message, title, callbackFunction) { if (title == null) title = ''; $.alertOptions._show(title, message, null, 'confirm', function(result) { if (callbackFunction) callbackFunction(result); }); }, prompt: function(message, value, title, callbackFunction) { if (title == null) title = ''; $.alertOptions._show(title, message, value, 'prompt', function(result) { if (callbackFunction) callbackFunction(result); }); }, auth: function(message, title, callbackFunction) { if (title == null) title = ''; $.alertOptions._show(title, message, null, 'auth', function(result) { if (callbackFunction) callbackFunction(result); }); }, message: function(message, title, callbackFunction) { if (title == null) title = ''; $.alertOptions._show(title, message, null, 'message', function(result) { if (callbackFunction) callbackFunction(result); }); }, warning: function(message, title, callbackFunction) { if (title == null) title = ''; $.alertOptions._show(title, message, null, 'warning', function(result) { if (callbackFunction) callbackFunction(result); }); }, error: function(message, title, callbackFunction) { if (title == null) title = ''; $.alertOptions._show(title, message, null, 'error', function(result) { if (callbackFunction) callbackFunction(result); }); }, /* MÉTODOS PRIVADOS */ _show: function(title, msg, value, type, callbackFunction) { $.alertOptions._hide(); $.alertOptions._overlay('show'); var baseDeContainer = "font-family: Arial, sans-serif; font-size: 12px; min-width: 300px; max-width: 600px; color: #000; "; var baseDeTitulo = "font-size: 14px; font-weight: bold; text-align: center; line-height: 1.75em; border-bottom: solid 1px #999; padding: 0em; margin: 0em; cursor: default; padding-bottom: 0px; "; var baseDeContent = "background: 16px 16px no-repeat url(" + $.alertOptions.imagesPath + "base.gif); padding: 1em 1.75em; margin: 0em;"; var roundedBordersContainer = "border-radius: " + $.alertOptions.window_corners + "px; " + "-moz-border-radius: " + $.alertOptions.window_corners + "px; " + "-webkit-border-radius: " + $.alertOptions.window_corners + "px; "; var roundedBordersTitle = "border-radius: " + (($.alertOptions.window_corners * 1) - 2) + "px " + (($.alertOptions.window_corners * 1) - 2) + "px 0px 0px; " + "-moz-border-radius: " + (($.alertOptions.window_corners * 1) - 2) + "px " + (($.alertOptions.window_corners * 1) - 2) + "px 0px 0px; " + "-webkit-border-radius: " + (($.alertOptions.window_corners * 1) - 2) + "px " + (($.alertOptions.window_corners * 1) - 2) + "px 0px 0px; "; var titleBar_Style = (title > '')?"display:block":"display:none;"; $("body").append( '<div id="jqAlert_container" class="container" style="' + baseDeContainer + 'background-color:' + $.alertOptions.window_backgroundColor + '; ' + roundedBordersContainer + '; border:' + $.alertOptions.window_border + ';">' + '<h1 id="jqAlert_title" style="' + baseDeTitulo + roundedBordersTitle + ' ' + titleBar_Style + '"></h1>' + '<div id="jqAlert_content" style="' + baseDeContent + '">' + '<div id="jqAlert_message" class="row col-sm-12" style="padding-left: 48px;"></div>' + '</div>' + '</div>'); if ($.alertOptions.dialogClass) $("#jqAlert_container").addClass($.alertOptions.dialogClass); var pos = 'fixed'; $("#jqAlert_container").css({ position: pos, zIndex: 99999, padding: 0, margin: 0 }); if ($.alertOptions.cancelOnEscape){ $("body").on("keydown", function(e){ if (e.which == 27) $.alertOptions._hide(); }); } if (title > '') $("#jqAlert_title").text(title); $("#jqAlert_message").text(msg + "<br /><br />"); $("#jqAlert_message").html( $("#jqAlert_message").text().replace(/\n/g, '<br />') ); $("#jqAlert_container").css({ minWidth: $("#jqAlert_container").outerWidth(), maxWidth: $("#jqAlert_container").outerWidth() }); $.alertOptions._reposition(); $.alertOptions._maintainPosition(true); var boton_OK = '<input type="button" class="btn btn-' + $.alertOptions.OK_Button_class + '" value="' + $.alertOptions.okButton + '" id="jqAlert_ok" />'; var boton_CANCEL = ' <input type="button" class="btn btn-' + $.alertOptions.Cancel_Button_class + '" value="' + $.alertOptions.cancelButton + '" id="jqAlert_cancel" />'; var panelDeBotones = ''; switch (type) { case 'alert': if (title > ''){ $("#jqAlert_title").css({ 'color':'#666', 'background':'url(' + $.alertOptions.imagesPath + 'title.gif) top repeat-x' }); } $("#jqAlert_content").css('background-image', 'url(' + $.alertOptions.imagesPath + 'alert.gif)'); panelDeBotones = '<div id="jqAlert_panel" style="text-align: center; margin: 1em 0em 0em 1em;">'; if ($.alertOptions.showConfirmButton) panelDeBotones += boton_OK; panelDeBotones += '</div>'; $("#jqAlert_message").after(panelDeBotones); $("#jqAlert_ok").click( function() { $.alertOptions._hide(); callbackFunction(true); }); break; case 'confirm': if (title > ''){ $("#jqAlert_title").css({ 'color':'#666', 'background':'url(' + $.alertOptions.imagesPath + 'title_info.gif) top repeat-x' }); } $("#jqAlert_content").css('background-image', 'url(' + $.alertOptions.imagesPath + 'confirm.gif)'); panelDeBotones = '<div id="jqAlert_panel" style="text-align: center; margin: 1em 0em 0em 1em;">'; if ($.alertOptions.showConfirmButton) panelDeBotones += boton_OK; if ($.alertOptions.showCancelButton) panelDeBotones += boton_CANCEL; panelDeBotones += '</div>'; $("#jqAlert_message").after(panelDeBotones); $("#jqAlert_ok").click( function() { $.alertOptions._hide(); if ( callbackFunction ) callbackFunction(true); }); $("#jqAlert_cancel").click( function() { $.alertOptions._hide(); if ( callbackFunction ) callbackFunction(false); }); break; case 'prompt': if (title > ''){ $("#jqAlert_title").css({ 'color':'#666', 'background':'url(' + $.alertOptions.imagesPath + 'title_info.gif) top repeat-x' }); } $("#jqAlert_content").css('background-image', 'url(' + $.alertOptions.imagesPath + 'prompt.gif)'); panelDeBotones = '<div id="jqAlert_panel" style="text-align: center; margin: 1em 0em 0em 1em;">'; if ($.alertOptions.showConfirmButton) panelDeBotones += boton_OK; if ($.alertOptions.showCancelButton) panelDeBotones += boton_CANCEL; panelDeBotones += '</div>'; $("#jqAlert_message").append('<div class="row col-sm-8"><input type="text" class="form-control" id="jqAlert_prompt" style="margin: .5em 0em;" /></div>').after(panelDeBotones); $("#jqAlert_prompt").width( $("#jqAlert_message").width() ); $("#jqAlert_ok").click( function() { var val = $("#jqAlert_prompt").val(); $.alertOptions._hide(); if ( callbackFunction ) callbackFunction( val ); }); $("#jqAlert_cancel").click( function() { $.alertOptions._hide(); if ( callbackFunction ) callbackFunction( null ); }); if ( value ) $("#jqAlert_prompt").val(value); $("#jqAlert_prompt").focus().select(); break; case 'auth': if (title > ''){ $("#jqAlert_title").css({ 'color':'#666', 'background':'url(' + $.alertOptions.imagesPath + 'title_success.gif) top repeat-x' }); } $("#jqAlert_content").css('background-image', 'url(' + $.alertOptions.imagesPath + 'auth.gif)'); panelDeBotones = '<div id="jqAlert_panel" style="text-align: center; margin: 1em 0em 0em 1em;">'; if ($.alertOptions.showConfirmButton) panelDeBotones += boton_OK; if ($.alertOptions.showCancelButton) panelDeBotones += boton_CANCEL; panelDeBotones += '</div>'; var camposDeAcceso = '<label for="jqAlert_user">' + $.alertOptions.label_user_auth + '<br />'; camposDeAcceso += '<input type="text" class="form-control" id="jqAlert_user" style="margin: .5em 0em;" /></label><br />'; camposDeAcceso += '<label for="jqAlert_password">' + $.alertOptions.label_pw_auth + '<br />'; camposDeAcceso += '<input type="password" class="form-control" id="jqAlert_password" style="margin: .5em 0em;" /></label>'; $("#jqAlert_message").append('<div class="row col-sm-8">' + camposDeAcceso + '</div>').after(panelDeBotones); $("#jqAlert_user").width($("#jqAlert_message").width()); $("#jqAlert_password").width($("#jqAlert_message").width()); $("#jqAlert_ok").click( function() { var valUser = $("#jqAlert_user").val(); var valPassword = $("#jqAlert_password").val(); var datosDeAcceso = new Array(valUser, valPassword); $.alertOptions._hide(); if (callbackFunction) callbackFunction(datosDeAcceso); }); $("#jqAlert_cancel").click( function() { $.alertOptions._hide(); if (callbackFunction) callbackFunction(false); }); $("#jqAlert_user").focus().select(); break; case 'message': if (title > ''){ $("#jqAlert_title").css({ 'color':'#666', 'background':'url(' + $.alertOptions.imagesPath + 'title_info.gif) top repeat-x' }); } $("#jqAlert_content").css('background-image', 'url(' + $.alertOptions.imagesPath + 'message.gif)'); panelDeBotones = '<div id="jqAlert_panel" style="text-align: center; margin: 1em 0em 0em 1em;">'; if ($.alertOptions.showConfirmButton) panelDeBotones += boton_OK; panelDeBotones += '</div>'; $("#jqAlert_message").after(panelDeBotones); $("#jqAlert_ok").click( function() { $.alertOptions._hide(); callbackFunction(true); }); break; case 'warning': if (title > ''){ $("#jqAlert_title").css({ 'color':'#666', 'background':'url(' + $.alertOptions.imagesPath + 'title_warning.gif) top repeat-x' }); } $("#jqAlert_content").css('background-image', 'url(' + $.alertOptions.imagesPath + 'warning.gif)'); panelDeBotones = '<div id="jqAlert_panel" style="text-align: center; margin: 1em 0em 0em 1em;">'; if ($.alertOptions.showConfirmButton) panelDeBotones += boton_OK; panelDeBotones += '</div>'; $("#jqAlert_message").after(panelDeBotones); $("#jqAlert_ok").click( function() { $.alertOptions._hide(); callbackFunction(true); }); break; case 'error': if (title > ''){ $("#jqAlert_title").css({ 'color':'#333', 'background':'url(' + $.alertOptions.imagesPath + 'title_error.gif) top repeat-x' }); } $("#jqAlert_content").css('background-image', 'url(' + $.alertOptions.imagesPath + 'error.gif)'); panelDeBotones = '<div id="jqAlert_panel" style="text-align: center; margin: 1em 0em 0em 1em;">'; if ($.alertOptions.showConfirmButton) panelDeBotones += boton_OK; panelDeBotones += '</div>'; $("#jqAlert_message").after(panelDeBotones); $("#jqAlert_ok").click( function() { $.alertOptions._hide(); callbackFunction(true); }); break; } /* Si el cuadro de diálogo es dragable */ if ($.alertOptions.draggable) { try { if (title == ''){ $("#jqAlert_container").draggable({ handle: $("#jqAlert_content") }); $("#jqAlert_content").css({ cursor: 'move' }); } else { $("#jqAlert_container").draggable({ handle: $("#jqAlert_title") }); $("#jqAlert_title").css({ cursor: 'move' }); } } catch(e) { /* requires jQuery UI draggables */ } } }, /* Cierre del cuadro de diálogo */ _hide: function() { $("#jqAlert_container").remove(); $.alertOptions._overlay('hide'); $.alertOptions._maintainPosition(false); }, /* LA capa que cubre toda la pantalla, para bloquear los contenidos. */ _overlay: function(status) { switch( status ) { case 'show': $.alertOptions._overlay('hide'); $("BODY").append('<div id="jqAlert_overlay"></div>'); $("#jqAlert_overlay").css({ position: 'absolute', zIndex: 99998, top: '0px', left: '0px', width: '100%', height: $(document).height(), background: $.alertOptions.overlayColor, opacity: $.alertOptions.overlayOpacity }); break; case 'hide': $("#jqAlert_overlay").remove(); break; } }, /* Reposicionamiento cuando hay un resize. */ _reposition: function() { var top = (($(window).height() / 2) - ($("#jqAlert_container").outerHeight() / 2)) + $.alertOptions.verticalOffset; var left = (($(window).width() / 2) - ($("#jqAlert_container").outerWidth() / 2)) + $.alertOptions.horizontalOffset; if ( top < 0 ) top = 0; if ( left < 0 ) left = 0; $("#jqAlert_container").css({ top: top + 'px', left: left + 'px' }); $("#jqAlert_overlay").height( $(document).height() ); }, _maintainPosition: function(status) { if ( $.alertOptions.repositionOnResize ) { switch(status) { case true: $(window).bind('resize', $.alertOptions._reposition); break; case false: $(window).unbind('resize', $.alertOptions._reposition); break; } } } } /* Llamadas a las funciones. */ jqAlert = function(message, title, callbackFunction) { $.alertOptions.alert(message, title, callbackFunction); } jqConfirm = function(message, title, callbackFunction) { $.alertOptions.confirm(message, title, callbackFunction); }; jqPrompt = function(message, value, title, callbackFunction) { $.alertOptions.prompt(message, value, title, callbackFunction); }; jqAuth = function(message, title, callbackFunction) { $.alertOptions.auth(message, title, callbackFunction); }; jqMessage = function(message, title, callbackFunction) { $.alertOptions.message(message, title, callbackFunction); } jqWarning = function(message, title, callbackFunction) { $.alertOptions.warning(message, title, callbackFunction); } jqError = function(message, title, callbackFunction) { $.alertOptions.error(message, title, callbackFunction); } })(jQuery); |
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
:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="https://code.jquery.com/jquery-1.12.4.js" integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU=" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/i18n/jquery-ui-i18n.js" crossorigin="anonymous"></script> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> <!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous"> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> <script src="jqAlert.js"></script> <script language="javascript"> $(function(){ $.alertOptions.overlayColor = '#5bc5eb'; $.alertOptions.overlayOpacity = .5; $('#alerta').on('click', function(){ jqAlert('Esto sustituye al alert', 'Barra de título', function() { console.log('Has cerrado el alert'); }); }); }); </script> </head> <body> <button class="<btn btn-primary" id="alerta">Alerta</button> </body> </html> |
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:

La página, recién cargada en el navegador, con la consola en la parte inferior.
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:

Página bloqueada con el jqAlert. Por supuesto, la consola del navegador no se bloquea, sólo la página.
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:

Se ha cerrado el alert.
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 |
<html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="jquery.js"></script> <script src="jquery-ui.js"></script> <link rel="stylesheet" href="bootstrap.css"> <link rel="stylesheet" href="bootstrap-theme.css"> <script src="jqAlert.js"></script> <script src="bootstrap.js"></script> <script language="javascript"> $(function(){ $.alertOptions.overlayColor = '#000'; $.alertOptions.overlayOpacity = .5; $.alertOptions.okButton = "Aceptar"; $.alertOptions.cancelButton = "Cancelar"; $('a').on('click', function(e){ e.preventDefault(); switch($(this).prop("id")){ case "alerta": $.alertOptions.showCancelButton = false; jqAlert('Esto sustituye al alert', 'Barra de título', function() { console.log('Has cerrado el alert'); }); break; case "confirmacion": $.alertOptions.showCancelButton = true; jqConfirm('Confirma si aceptas las <u>condiciones</u>', '¿Aceptas?', function(aceptado) { if (aceptado){ console.log('Has aceptado'); } else { console.log('No has aceptado'); } }); break; case "pregunta": $.alertOptions.showCancelButton = false; jqPrompt('Escribe tu nombre', '', 'Barra de título', function(tecleado) { console.log('Tu nombre es ' + tecleado); }); break; case "mensaje": $.alertOptions.showCancelButton = false; jqMessage('Esto es un cuadro de mensaje', 'Mensaje', function() { console.log('Has cerrado el mensaje'); }); break; case "aviso": $.alertOptions.showCancelButton = false; jqWarning('Esto es un cuadro de aviso', 'Aviso', function() { console.log('Has cerrado el aviso'); }); break; case "error": $.alertOptions.showCancelButton = true; jqError('Esto es un cuadro de error', 'Error', function(resultado) { if (resultado){ console.log('Has corregido el error.'); } else { console.log('Has ignorado el error.'); } }); break; case "auth": $.alertOptions.showCancelButton = true; 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."); } }); break; } console.log(); }); }); </script> </head> <body> <div class="container"> <div class="row"> <a href='#' class="btn btn-primary" id="alerta">Ver un alert</a> </div><br /> <div class="row"> <a href='#' class="btn btn-primary" id="confirmacion">Ver un confirm</a> </div><br /> <div class="row"> <a href='#' class="btn btn-primary" id="pregunta">Ver un prompt</a> </div><br /> <div class="row"> <a href='#' class="btn btn-primary" id="mensaje">Ver un message</a> </div><br /> <div class="row"> <a href='#' class="btn btn-primary" id="aviso">Ver un warning</a> </div><br /> <div class="row"> <a href='#' class="btn btn-primary" id="error">Ver un error</a> </div><br /> <div class="row"> <a href='#' class="btn btn-primary" id="auth">Acceso</a> </div><br /> </div> </body> </html> |
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.
![]() |