Crear cajas de mensajes con CSS y jQuery

8 COMENTARIOS -  Publicado hace 14 meses -  Clasificado en: , , ,

Haciendo uso de CSS y jQuery podemos mostrar de una manera mucho más atractiva los mensajes que deseemos mostrar al usuario de nuestro sitio o aplicación web. Lo primero que deberemos hacer es crear el CSS para nuestras cajas. Si necesitas más información sobre este tema puedes consultar "CSS Message Boxes for different message types" .

.info, .exito, .alerta, .error {
       font-family:Arial, Helvetica, sans-serif; 
       font-size:13px;
       border: 1px solid;
       margin: 10px 0px;
       padding:15px 10px 15px 50px;
       background-repeat: no-repeat;
       background-position: 10px center;
}
.info {
       color: #00529B;
       background-color: #BDE5F8;
       background-image: url('info.png');
}
.exito {
       color: #4F8A10;
       background-color: #DFF2BF;
       background-image:url('exito.png');
}
.alerta {
       color: #9F6000;
       background-color: #FEEFB3;
       background-image: url('alerta.png');
}
.error {
       color: #D8000C;
       background-color: #FFBABA;
       background-image: url('error.png');
}

Los iconos utilizados para este ejemplo son "Knob Buttons Toolbar icons".

El código XHTML sería, para cada uno de los mensajes, algo similar a:

<div class="info">Mensaje de información que deseamos mostrar al usuario</div> 
<div class="exito">Mensaje de éxito de la operación realizada</div>
<div class="alerta">Mensaje de alerta que deseamos mostrar al usuario</div> 
<div class="error">Mensaje que informa al usuario sobre el error que se ha producido</div>

Lo que nos daría un resultado similar al siguiente:

Ahora tan sólo queda añadir algún tipo de efecto con jQuery. Para poder interactuar con las cajas de mensajes de una forma genérica con jQuery, le añadiremos una clase más a cada uno de los elementos:

<div class="info mensajes">Mensaje de información que deseamos mostrar al usuario</div> 
<div class="exito mensajes">Mensaje de éxito de la operación realizada</div>
<div class="alerta mensajes">Mensaje de alerta que deseamos mostrar al usuario</div> 
<div class="error mensajes">Mensaje que informa al usuario sobre el error que se ha producido</div>

Ahora tan sólo queda darle algún efecto con jQuery. Podemos animar el mensaje, cambiarlo de color, hacerlo aparecer, etc. En este ejemplo, y creo que es una forma bastante interesante de mostrar los mensajes, la caja que muestra el mensaje aparece, permanece durante tres segundos y desaparece tras un ligero parpadeo.

El código para ello sería:

$(document).ready(function(){
      setTimeout(function(){ $(".mensajes").fadeOut(800).fadeIn(800).fadeOut(500).fadeIn(500).fadeOut(300);}, 3000); 
});

El código para este ejemplo sería:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Mensajes2</title>
<style type="text/css">
.info, .exito, .alerta, .error {
       font-family:Arial, Helvetica, sans-serif; 
       font-size:13px;
       border: 1px solid;
       margin: 10px 0px;
       padding:15px 10px 15px 50px;
       background-repeat: no-repeat;
       background-position: 10px center;
       position:relative;
}
.info {
       color: #00529B;
       background-color: #BDE5F8;
       background-image: url('info.png');
}
.exito {
       color: #4F8A10;
       background-color: #DFF2BF;
       background-image:url('exito.png');
}
.alerta {
       color: #9F6000;
       background-color: #FEEFB3;
       background-image: url('alerta.png');
}
.error {
       color: #D8000C;
       background-color: #FFBABA;
       background-image: url('error.png');
}
</style>
<script type="text/javascript" src="jquery-1.2.6.js"></script>
<script type="text/javascript">
$(document).ready(function(){
       setTimeout(function(){ $(".mensajes").fadeOut(800).fadeIn(800).fadeOut(500).fadeIn(500).fadeOut(300);}, 3000); 
});
</script>
</head>
<body>
<div class="exito mensajes">Mensaje de éxito de la operación realizada</div>
<p>El mensaje desaparecerá a los tres segundos.</p>
</body>
</html>

Lógicamente podremos cambiar el tipo de mensaje variando la primera clase del div en función del resultado de las operaciones realizadas por el usuario o por la información que deseemos suministrarle.

Ver ejemplo en funcionamiento » »

Descargar ejemplo completo » »

Algunas entradas relacionadas:

También te puede interesar:

COMENTARIOS

Publicado hace 14 meses
Jose -   http://blog.moskis.net/

Yo hace años que uso un CSS parecido en mi blog, pero sin efectos jquery.

La verdad es que tengo que hacer algo de limpieza en esa parte del css, asi que en parte esto me vendrá bien :)
Publicado hace 14 meses
daTO -  
Muy bien tutorial, completo y detallado como siempre. Un saludo y feliz año nuevo !!
Publicado hace 14 meses
Mauro -   http://emebe.com.ar

Yo agregaria la etiqueta image en el head asi no aparece la molesta barra del explorer sobre las imagenes
Publicado hace 14 meses
demixo -   http://demixo.org

execlente aporte.

Gracias.
Publicado hace 13 meses
Oscar2h -  
No se porque razon no me resulta el tema de jquery, no desaparece el mensaje, me pueden ayudar porfaa
Publicado hace 13 meses
ddsign -   http://ddsign.wordpress.com

Está genial! Gracias por el minitutorial y los ejemplos.
Publicado hace 4 meses
Cesar Antonio Gonzalez Ramirez -   http://clubdematematicas.com

GRACIAS POR EL ARTICULO, SERÁ DE MUCHA UTILIDAD EN MI WEB. ATTE dESARROLLADOR WEB MEXICO
Publicado hace 4 semanas
Belen -  
muy bueno el tuto! pero tengo una pregunta.. quiero que el mensaje me aparezca al yo hacer click en un link q tengo.. como hago eso? porque me aparece al iniciar la pagina y yo quiero que aparezca cuando hago el click

te agradeceria si me respondes al mail por favor.
gracias!
Haz un comentario

¡Gracias por dejar tu opinión! Por favor procura que tu comentarios sean apropiados respecto al tema tratado en la entrada; que no sean spam, u ofensivos, de otro modo, serán eliminados. Todos los comentarios serán moderados antes de su publicación por lo que su aparición en la web puede verse aplazada un cierto tiempo. Si deseas realizar algún comentario, crítica o sugerencia sobre la propia web puedes hacer a través de la siguiente dirección de correo: webintenta@webintenta.com