Tema: Función para mostrar alertas / notificaciones con JQUERY
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 01/05/2010, 05:31
Avatar de neodani
neodani
 
Fecha de Ingreso: marzo-2007
Mensajes: 1.811
Antigüedad: 17 años, 2 meses
Puntos: 20
Función para mostrar alertas / notificaciones con JQUERY
Buenas,

Estoy intentando mostrar alertas personalizadas según se pulse un botón y no consigo que funcione, podríais echarme una mano?

El código es el siguiente, lo ideal sería poder crear una función en la que yo le diria pasar el mensaje que quisiera así como el estilo del mensaje, Ej.

function notificacion (msg, estilo){} y que al pulsar sobre cada botón cogiese el mensaje correcto que tiene que mostrar. Se puede hacer?

Código HTML: 
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
  4. <title>Mostrar notificacion al pulsar botón</title>
  5. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
  6. <script type="text/javascript" >
  7. $(document).ready(function(){
  8.     $("button").click(function () {
  9.         $change="<div class='notificacion'> Has recibido nuevo mensaje!</div>";
  10.         setTimeout(function(){
  11.             $(".notificacion").fadeOut("slow", function () {
  12.             $(".notificacion").remove();
  13.         });
  14.         }, 4000);
  15.  
  16.     });
  17. });
  18. </script>
  19. <style type="text/css">
  20. html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, center, u, b, i {
  21.     margin: 0;padding: 0;border: 0;outline: 0;font-weight: normal;font-style: normal;font-size: 100%;font-family: inherit;vertical-align: baseline
  22. }
  23. body {color: #000000;background-color:#fff;font-family:Verdana, Arial, Helvetica, sans-serif;}
  24. .cabecera{height:200px;width:100%;background:yellow;}
  25. .notificacion{
  26.     width:100%;
  27.     margin:0px;
  28.     padding-top:5px;
  29.     padding-bottom:5px;
  30.     background-color: #50EF3E;
  31.     color:white;
  32.     font-weight:bold;
  33.     font-size:14px;
  34.     text-align:center;
  35.     top:0px;
  36.     position:fixed;
  37. }
  38. </style>
  39.  
  40. </head><body>
  41. <?php echo $change; ?>
  42. <div class="cabecera">
  43.     <p> esta es la cabecera </p>
  44. </div>
  45. <button>Recibir mensaje</button>
  46. <button>Enviar mensaje</button>
  47. <button>Eliminar mensaje</button>
  48.  
  49. <div id="container" >
  50.     <p>MOSTRANDO NOTIFICACIONES....</p>
  51. </div>
  52. <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><p>test</p>
  53. </body>
  54. </html>

Muchas gracias de antemano!