Olvidate de las aburridas alertas de navegador y crea tus propios cuadros de dialogo con AlertifyJS.

Share on Pinterest
Comparte con tus amigos










Enviar

Con Alertify podemos dejar a un lado los antiestéticos alert de javascript ya que nos facilita la creación de dialogs y notificaciones muy atractivos visualmente.

Alertify es un framework de javascript que nos facilita la creación de estos elementos anteriormente mencionados, totalmente responsive, muy personalizables, con transiciones y una cosa muy importante, es rápido y sencillo de implementar.

¿Qué nos ofrece?

Dialogs

Alertas:

Creando mejores alertas y cuadros de diálogo con AlertifyJS_1

Confirmación:

Creando mejores alertas y cuadros de diálogo con AlertifyJS - cuadro de confirmacion

Prompt:

Creando mejores alertas y cuadros de diálogo con AlertifyJS

Notificaciones

Mensajes normales, de éxito, error y warning.

Creando mejores alertas y cuadros de diálogo con AlertifyJS

Con los ejemplos anteriores, nos damos cuenta del potencial de este framework, además podemos personalizar todos los estilos fácilmente.

El framework nos ofrece la librería, estilo css y varios temas, sólo tenemos que referenciarlos en nuestro código, de la siguiente forma, en este caso he elegido el tema por defecto.

Ejemplos de Alertas

Alerta

Confirmación

Notificaciones

Vemos lo fácil que es utilizar este framework y lo útil que puede llegar a ser para dar feedback al usuario.

http://alertifyjs.com/

Alertify en Github: https://github.com/MohammadYounes/AlertifyJS

Share on Pinterest
Comparte con tus amigos










Enviar

Enrique de la Torre

Twitter Google + Linkedin Acerca de

  • Fascomp

    Estimado el post esta buenísimo pero tengo una consulta de pura ignorancia. Donde, o mas bien dicho, el código para generar estos avisos donde lo pongo, en un archivo .php o en el .html o donde??? Gracias.

    • Enrique de la Torre

      Hola, es código javascript, utilizando la librería Jquery, asi que lo debes de poner en un archivo JS o en tu fichero php o html dentro de la etiqueta .
      Saludos

      • Fascomp

        Gracias pero aun no se como llamarlo para que funcione. Como debo hacer por ejemplo si tengo un formulario de logeo y el usuario no se loguea correctamente ponerle uno de estos mensajes….

        • Ric Leal

          Hay varias formas de llamarlo amigo, recuerda que es un script, por ende podrías llamarlo desde un link por ejem…

          link… con el atributo onclick donde llamas al script.

          A simple vista es muy engorroso, pero es solo para darte un ejemplo de su flexibilidad, podrías hacer lo mismo pero esta vez armar tu librería por ejemplo funciones.js donde crees una funcion miFuncion() que tenga el código del llamado, y así.

          Bueno más o menos se me vienen a la cabeza esos ejemplo, acabo de leer sobre esto xD. Respecto a lo de tu login pues bien podrías hacer una confición… Si es exitosa, muestro tal mensaje… recuerda que es un escript.. por ende podrías colocarlo simplemente entre etiquetas y si no es exitosa, el otro script. Espero que te sirva, saludos.

  • Eduardo Cruz Hermida

    Una pregunta, yo despliego mi información de un jsp con alert, el problema es donde declaro el alertify y como utilizarlo
    de antemano gracias.

  • jhon

    Saludos, amigo tengo una duda, es que al dar cancelar en un confirm no se quita la ventana, solo sale el aviso de que se presiono cancelar, caso contrario cuando doy confirmar que si desaparece , gracias

  • J Salbador Arambul

    y como cierro el aviso?

  • Mejor Utilizo Php con envio de Correo

  • Javier Parra

    hola que hubo falconmasters, tengo una pequeña duda estuve trabajando con wordpress e hice un pequeño plugin para enviar mensajes de texto por medio de un servidor de sms que tengo instalado por alli todo bien la cuestion es que quise poner a funcionar esta libreria alertifyjs en el plugin y no pude, no se si tienes experiencia con WP pero por lo que veo tienes una gran cantidad de conocimientos, si me podrias orientar sobre seria muy cool gracias bro de antemano

  • Rafael Rodriguez

    FalconMasters, cómo se hace para agregar esta funcionalidad de comentarios con integracion de redes sociales?

    • Es con el servicio de disqus.com

      • Rafael Rodriguez

        Gracias por la info. Imagino disqus.com es de pago? Entre en el sitio y no vi como contratar ese servicio.

        • No, es gratiuto, solo que tienes que buscar el plugin para la plataforma que usas por ejemplo el plugin para wordpress.

          • Rafael Rodriguez

            Muchas gracias! Tu blog esta montado con wordpress? Imagino no vale la pena ponerme a programar en php si wordpress ofrece todo hecho, pero Me preocupa que wordpress sea pesado y sobrecargue el servidor.

      • Raynex

        Amigo, todo funciona bien, pero como puedo hacer un salto de linea en las alertas? en las alertas normales usaba el \n pero el alertify al parecer no lo reconoce

        • Reinier Garcia Ramos

          Debes ponerle, por ejemplo:

          alertify.alert(‘Hola’ + ” + ‘mundo’);

          Lo que el objeto alertify está recibiendo en sus funciones alert, promt y confirm es puro html.

  • Andres Rivero

    Cómo hago para que funcione eso? osea lo descarge ahora que? ¿que tengo que hacer para ponerlo en funcionamiento?

    • Reinier Garcia Ramos

      Tecleas esto en el header, por ejemplo:

  • Kathia rodriguez ortiz

    Hola Falcon, quiero aplicar el alertify para eliminar un registro al dar Ok, lo estoy realizando c on una function algo como esto:

    function confirmar(){
    confirmar=confirm(“¿Esta seguro que desea eliminar el registro seleccionado?”);
    if (confirmar)
    quitarCE();
    else
    return false;
    }
    y luego desde un btn llamo a la función.

    Pero al crearlo con el alertify tengo algo como esto y no lo logro.,,,

    var msg = alertify.confirm(“¿Esta seguro que desea eliminar el registro seleccionado?”, null, null, null).set({Ok:’Confirmar’,cancel:’Cancelar’});
    msg.callback = function (confirmar){

    if (confirmar)
    quitarCE();
    else
    return false;
    }


Aprende con nuestros cursos

Escribe CSS como un PRO, Curso Básico de SASS

Escribe CSS como un PRO, Curso Básico de SASS

Optimiza, Organiza y escribe tu código CSS como un profesional con SASS.

Inicia el curso
Curso básico de WordPress desde 0

Curso básico de WordPress desde 0

Aprende a utilizar Wordpress desde 0 y crea sitios web, blogs, galerías e incluso tiendas online.

Inicia el curso
Curso cómo hacer un Sitio Web básico con Bootstrap

Curso cómo hacer un Sitio Web básico con Bootstrap

Aprende como hacer un sitio web básico utilizando lo mejor de Bootstrap

Inicia el curso
Curso completo de Bootstrap desde 0

Curso completo de Bootstrap desde 0

Curso básico de Bootstrap, Aprende a crear sitios web adaptables a dispositivos móviles con este poderoso framework.

Inicia el curso