Dialogs JQuery: Mensajes de Alerta y Confirm

Buenas :). Estuve buscando cómo modificar el estilo de los mensajes alert y confirm, que muestran los navegadores. La única forma que hay de modificarlo es asíncronamente, bloqueando página  con un Modal. Esto significa que el código de JavaScript no se paralizará esperando una respuesta del usuario, sino que abrirá la ventana y el código subsiguiente a la llamada del mensaje de alerta o confirmación, se seguirá ejecutando.

Tanto con JQuery como con MooTools, se puede implementar este Modal.

En la página oficial de MooTools se pueden encontrar gran cantidad de plugins para este tipo de interfaz. Un ejemplo:

http://mootools.net/forge/p/moodialog

Los plugins oficiales para JQuery se pueden encontrar en la página oficial de JQueryUI:

http://jqueryui.com/demos/dialog/

Aquí les mostraré cómo se hace con JQuery, pero la misma secuencia se puede usar con MooTools, lo que cambia es el código a utilizar y, claro está, las llamadas a los JavaScript desde la cabecera de nuestra página.

Para los mensajes de alerta

Este caso es simple, porque sólo muestra el formulario con un mensaje y un botón 'Ok', que puede llevar cualquier texto:

function alerta(mensaje)

{

$( "#div-dialogo" ).dialog( "destroy" );

/* Si tenemos saltos de línea con \n, 

* lo transformamos a <br>, para que lo interprete HTML

*/

var mensaje=mensaje.split('\n').join('<br>');

/*Le damos estilo al mensaje*/

var mostrar = '<p style="font-size: 15px;"><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>' + mensaje + '</p>';

/*Este es un equivalente a innerHTML, pero en JQuery*/

$( "#div-dialogo" ).html(mostrar);

/*Con la opción autoOpen, abrimos automáticamente el diálogo*/

$( "#div-dialogo" ).dialog({

bgiframe: true,

autoOpen: true,

minHeight: 200,

width: 500,

closeOnEscape: false,

draggable: true,

resizable: false,

title: "Mensaje",

modal: true,

buttons: {

Ok: function() {

$( this ).dialog( "destroy" );

}

}

});

}

Para los mensajes de confirmar una respuesta

Para este mensaje necesitamos recibir una respuesta, por si tenemos más de una opción y saber cuál escogimos. Le coloqué un segundo parámetro para valores extra:

function confirmar(mensaje, params)

{

/*Idem alerta*/

var mensaje=mensaje.split('\n').join('<br>');

/*Idem alerta*/

var mostrar = '<p style="font-size: 15px;"><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>' + mensaje + '</p>';

/*Idem alerta*/

$("#div-dialogo").html(mostrar);

/*Enviamos los parámetros a params*/

$( "#div-dialogo" ).data("params", params);

$( "#div-dialogo" ).dialog({

bgiframe: true,

autoOpen: true,

  minHeight: 200,

  width: 500,

  closeOnEscape: false,

  draggable: true,

  resizable: false,

title: "Confirme",

modal: true,

  buttons: {

     'Sí': function(param){

      $(this).dialog('destroy');

      /* Si la respuesta al usuario fue 'Sí', 

       * llamamos a una función que ejecutará lo que

       * queramos como respuesta al usuario.

       * Esta será respuestaConfirmar().

       */

     respuestaConfirmar($(this).data("params"));

  },

   'No': function(param){

    $(this).dialog('destroy');

   }

}

});

}

Por ejemplo, la respuesta podría ser, recargar un div con AJAX:

function respuestaConfirmar(params)

{

abrirAJAX(params.pagina+"?"+params.parametros, params.div, params.tipo_envio);

}

Llamando a la función confirmar, podemos utilizar el siguiente código, desde donde le pasamos los parámetros que usamos en respuestaConfirmar():

function llamadaConfirmar(CI_estudiante, nombre_estudiante, pregunta)

{

var params = {

 "pagina":"mostrar_mensaje",

"parametros":"CI_estudiante="+CI_estudiante+"&nombre_estudiante="+nombre_estudiante,

"div":"div-principal",

"tipo_envio":"post"};

 confirmar(pregunta, params);

}

Código HTML

Para ambos casos, necesitamos un div:

<div id="div-dialogo">

</div>

Y a la final, pueden fusionar ambos mensajes, Alerta y Confirmar, en una misma función con un simple IF :D.

Saludos y espero sus comentarios... xD