jQuery Alert Dialogs, substituto del alert(), confirm() y prompt() en jQuery

1 nov

Todos estamos de acuerdo en el que los alert(), confirm() y prompt() de Javascript son muy poco estéticos y dan un aspecto poco profesional a nuestra página web.

Hoy os presentamos jQuery Alert Dialogs, un substituto del típico alert(), confirm() y prompt() de Javascript, con el que podemos darle un toque más estético y profesional a nuestro sitio web.

Para empezar tendremos que añadir jAlert después de incluir jQuery como en el ejemplo:

<script type="text/javascript" src="../js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../jalert/jquery.alerts.js"></script>
<link href="../jalert/jquery.alerts.css" rel="stylesheet" type="text/css" />

Ahora que ya tenemos incluido el script, vamos a hacer la primera prueba con el el substituto de alert:

jAlert("Actualidad jQuery", "Actualidad jQuery");

En la primera variable le añadiremos el texto que aparecerá dentro de la ventana, y en la segunda variable, el título de la ventana jAlert.

Ahora vamos a probar con confirm, que ahora será jConfirm:

jConfirm("¿Te gusta Actualidad jQuery?", "Actualidad jQuery", function(r) {
	if(r) {
		jAlert("Te gusta Actualidad jQuery", "Actualidad jQuery");
	} else {
		jAlert("No te gusta Actualidad jQuery", "Actualidad jQuery");
	}
});

Dependiendo de si hacemos click en Continuar o Cancelar, nos devolverá la variable r con el valor true o false.

Y para terminar vamos a probar con prompt, que ahora será jPrompt:

jPrompt("Introduce tu nombre", "", "Actualidad jQuery", function(r) {
	if(r) {
		jAlert("Tu nombre es "+r, "Actualidad jQuery");
	}
});

Al igual que en el ejemplo anterior, la variable r nos devolverá el texto que hayamos introducido en la ventana.

A continuación tenéis un ejemplo con alert(), confirm(), prompt(), jAlert(), jConfirm() y jPrompt(), para que veáis sus diferencias.

6 Respuestas a “jQuery Alert Dialogs, substituto del alert(), confirm() y prompt() en jQuery”

  1. RAN 18 enero, 2011 at 1:48 #

    El link de descarga no funciona

  2. admin 18 enero, 2011 at 17:53 #

    Hola RAN, ya está arreglado.

  3. Ismael 15 febrero, 2011 at 14:15 #

    genial, el plugin está genial

  4. Jessica 25 julio, 2011 at 15:45 #

    Gracias :)

  5. Jessica 25 julio, 2011 at 15:46 #

    ¿Es posible enmascarar un password (que aparezca ‘*’)cuando utilizo un jPrompt?

  6. Edwin 9 marzo, 2012 at 9:09 #

    Muy bueno! Gracias!

Agregar un nuevo comentario