Mejores formas de mostrar notificaciones con jQuery

Question

Tengo un formulario que es un CRUD simple.

Estoy tratando de mostrar un buen mensaje de éxito cuando el usuario ingresa o borra un registro. He visto esto mucho en la web.

Soy muy nuevo en jquery. ¿Alguien sabe algún ejemplo que muestre cómo hacer esto?

Básicamente un div que se oscurecería lentamente.

Answer 1

Su pregunta es un tanto vaga ya que un "mensaje de éxito con buen aspecto" no es mucho.

Si está interesado, sin embargo, a través de responder a las preguntas aquí me ha replicado la funcionalidad de dos de las características "notificación" de Stackoverflow que la gente parece disfrutar: el banner en la parte superior de la página que aparece cuando se obtiene una nueva insignia, etc. y los recuadros rojos alrededor del sitio cada vez que algo sale mal con una acción. He utilizado técnicas similares a estas para mostrar mensajes de éxito en mis aplicaciones y mis clientes los han amado.

• To show the top banners - demo
• To show the red boxes - demo

Los ejemplos son muy simples, como todo lo que está haciendo es mostrar un DIV en algún lugar del documento y la decoloración dentro y fuera dependiendo de la situación . Eso es todo lo que necesitas para empezar.

Además de esto, si usted es un fanático de Mac (e incluso si no lo es) existe el complemento jQuery Growl que se basa en el sistema de notificación OS X. También soy un gran fan de usar el complemento BeautyTips para mostrar mensajes cerca de un elemento, ya que las burbujas son muy agradables y fáciles de modelar.

Answer 2

Quizás esté buscando for something like this o straight fade like this. Hay a few effects to choose from.

Answer 3

Esto debería funcionar:

function showSnazzySuccessMessage(text) 
{ 
    if($("#successMessage").length < 1) 
    { 
     //If the message div doesn't exist, create it 
     $("body").append("<div id='successMessage' style='text-align:center;vertical-align:middle;width:400px;position:absolute;top:200px;left:300px;border:2px solid black;background:green;margin:20px;display:none'>" + text + "</div>"); 
    } 
    else 
    { 
     //Else, update the text 
     $("#successMessage").html(text); 
    } 
    //Fade message in 
    $("#successMessage").show('slow'); 
    //Fade message out in 5 seconds 
    setTimeout('$("#successMessage").hide("slow")',5000); 
} 

Vas a tener que jugar con el estilo a que se vea la forma que desee, pero se entiende la idea.

Answer 4

Solo eche un nuevo div completamente posicionado y use la función fadeOut para animar su opacidad con una animación lenta.

Algo como esto:

var newDiv = $('div').css({position: 'absolute', left: '100px', top: '100px'}).text('SUCCESS!!!').appendTo($('body')); 
newDiv.fadeOut(5000); 

Answer 5

me gusta mucho jGrowl. Es muy discreto ya que los mensajes aparecen en la esquina izquierda y el usuario puede continuar haciendo lo que sea que esté haciendo, pero recibe comentarios del sistema. Y también se ve muy elegante :).