Crear cajas de mensajes con CSS y jQuery

Comentarios: 6
Tags: JQUERY, CSS, TIPS, TUTORIALES
Fecha: 12/01/2009

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:

Delicious Digg Meneame Fresqui Enchilame Design Float StumbleUpon

1	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 :)

2	daTO Muy bien tutorial, completo y detallado como siempre. Un saludo y feliz año nuevo !!

3	Mauro http://emebe.com.ar Yo agregaria la etiqueta image en el head asi no aparece la molesta barra del explorer sobre las imagenes

4	demixo http://demixo.org execlente aporte. Gracias.

5	Oscar2h No se porque razon no me resulta el tema de jquery, no desaparece el mensaje, me pueden ayudar porfaa

6	ddsign http://ddsign.wordpress.com Está genial! Gracias por el minitutorial y los ejemplos.