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.
Comentarios