Contenido

jQuery Alert Dialogs, reemplazo para alert(), prompt() y confirm()

31 dic

+ 13

jQuery Alert Dialogs, ofrece un reemplazo muy elegante a las funciones alert(), prompt() y confirm() de javascript.

jquery-alert-dialogs

¿Como usarlo?

Simplemente tendremos que añadir estas líneas a nuestro <head /> y dispondremos de esta nuevo funcionalidad.

<script src="/path/to/jquery.js" type="text/javascript"></script>
<script src="/path/to/jquery.ui.draggable.js" type="text/javascript"></script>

<script src="/path/to/jquery.alerts.js" type="text/javascript"></script>
<link href="/path/to/jquery.alerts.css" rel="stylesheet" type="text/css" media="screen" />

Una vez cargados los ficheros necesarios podremos llamar a las funciones que nos mostrarán las alertas.

jAlert()

jAlert es el sustituto de alert() y nos muestra alerta básica con un botón de aceptar para que el usuario acepte que ha visto el aviso.

jAlert('This is a custom alert box', 'Alert Dialog');

jPrompt()

Sustituto de prompt() que nos da la opción de introducir un valor desde la ventana.

jPrompt('Type something:', 'Prefilled value', 'Prompt Dialog', function(r) {
    if( r ) alert('You entered ' + r);
});

jConfirm()

Alternativa a confirm() en la que ofrecemos al usuario la opción de aceptar o cancelar una acción.

jConfirm('Can you confirm this?', 'Confirmation Dialog', function(r) {
    jAlert('Confirmed: ' + r, 'Confirmation Results');
});

Demo

Para verlos funcionando podemos verlos todos reunidos en esta demo que han montado

Consejo de uso

Personalmente estas modificaciones de funciones básicas, siempre me han dado miedo ya que deberían usarse como una alternativa y los sistemas propuestos siempre suelen ser muy dependientes del script, en este caso, si por cualquier cosa no es posible ejecutar jAlert(), jConfirm() o jPrompt() dejaremos de ofrecer al usuario la alerta necesaria para nuestra aplicación, por ese motivo os propongo usas un sistema que convierta esta opción en una alternativa y que en caso de fallar nos muestre su funcionalidad original.

//alert()
var oAlert = alert;
function alert(txt, title) {
    try {
        jAlert(txt, title);
    } catch (e) {
        oAlert(txt);
    }
}
alert("Hola", "Prueba");

//confirm()
var oConfirm = confirm;
function confirm(txt, title, func) {
    try {
        jConfirm(txt, title, func);
    } catch (e) {
        if (oConfirm (txt, title)) func();
    }
}
confirm("Hola", "Prueba", function(){
	alert("Prueba", "Superada");
});

//prompt()
var oPrompt = prompt;
function prompt(txt, input, title, func){
    try {
        jPrompt(txt, input, title, func);
    } catch(e) {
        func(prompt(txt, input, title));
    }
}
prompt("Hola", "Valor", "Prueba", function(r) {
	if (r) alert(r);
});

Comentar

#

Me reservo el derecho de eliminar y/o modificar los comentarios que contengan lenguaje inapropiado, spam u otras conductas no apropiadas en una comunidad civilizada. Si tu comentario no aparece, puede ser que akismet lo haya capturado, cada día lo reviso y lo coloco en su lugar. Siento las molestias.