En el blog de digitarald me he encontrado con esta magnifico script usando Mootools para crear cajas de notificacion.

Tiene varias formas de usarse y muchas opciones, las cuales nos permiten posicionar la caja en las esquinas del explorador o hacer notificaciones consecutivas, entre otras.

Requirimientos

MooTool

Descargar MooTools 1.2 con los siguientes modulos:

  • Element.Dimensions
  • Fx.Tween
  • Fx.Morph
  • Selectors
  • DomRead

Descargar (Desde la pagina del autor)

Puedes visitar el articulo del autor aqui.

A continuacion te pongo los ejemplos del autor, traducidos.

Creando notificaciones interminables:
Primero el codigo javascript:

< View plain text >
js

  1. window.addEvent('domready', function() {
  2.  
  3.     /**
  4.      * You usually reuse ONE instance.
  5.      * The 4 instances we'll reuse here represent different options.
  6.      */
  7.     var roars = [
  8.         new Roar(),
  9.         new Roar({
  10.             position: 'upperRight'
  11.         }),
  12.         new Roar({
  13.             position: 'lowerLeft'
  14.         }),
  15.         new Roar({
  16.             position: 'lowerRight'
  17.         })
  18.     ];
  19.  
  20.     /**
  21.      * CSS selector to get the 4 links and iterate over them
  22.      */
  23.     $$('#demo-links a').each(function(anchor, i) {
  24.  
  25.         /**
  26.          * Hey, now I can throw random messages at the user!
  27.          */
  28.         anchor.addEvent('click', function(el) {
  29.  
  30.             /**
  31.              * I take the index of the element as roar instance index.
  32.              */
  33.             roars[i].alert(
  34.                 [
  35.                     "You've got mail!",
  36.                     "News published »Feel the lion roar!«",
  37.                     "1000 visitors tracked today",
  38.                     "Whats that strange text here?",
  39.                     "Try to read that!",
  40.                     "Look ma, without sense!",
  41.                     "No Error occured! Thank you for listening!"
  42.                 ].getRandom(),
  43.                 [
  44.                     "Lorem ipsum laudem labore ex usu. Quo an antiopam repudiandae. Mei ex saepe possit molestie. Novum habemus nominavi pri id. Ad erat vivendo duo, dictas saperet scriptorem id vix, duis quaeque expetenda ex per.",
  45.                     "Tia helpi proto nomial u, nek ro eligi kunigi. Kuo vo sepen neniaĵo malprofitanto, on olda vavo ator ebl. Ind filo veki supersigno de. Neigi akuzativo por ie.",
  46.                     "Kaj jo miria posta itismo. It sia deka zorgi pseudoafikso, jesi kvanta da sub.",
  47.                     "Periodicos excellente publication non tu, de del toto latente religion. Que tu mundial traduction connectiones.",
  48.                     "Por is enen decilitro antaŭmetado. Ki pri egalo ologi alikvante, tioma iufoje monatonomo ko iel. Frida negativaj kvadriliono o tra, hura brosi respondo ali mf. Ali ec kaŭ duonhoro alternativo, log lo timi mikro, ato po nenia postpostmorgaŭ..",
  49.                     "Tot na malju neskolk. Es sxto varijm pridijt des. Sam na sport navestib, morkva jazika cxistju oni mi. Mne bolsx hcejm sxuflad ku. Klet nesxto to mne.",
  50.                     "Actually you should write some more useful in here, these are just word bits to fill the lines!"
  51.                 ].getRandom()
  52.             );
  53.             return false; // cancel the click
  54.         });
  55.  
  56.     });
  57.  
  58. });

Ahora el HTML para este ejemplo:

< View plain text >
HTML

  1. <label>
  2.     <input type="checkbox" value="1" checked="checked" id="demo-control" />
  3.     Roar! Iniciar Ejemplo
  4. </label>

Segundo ejemplo, Posicionando la caja de notificacion:

Codigo Mootools:

< View plain text >
js

  1. window.addEvent('domready', function() {
  2.  
  3.     /**
  4.      * You usually reuse ONE instance.
  5.      * The 4 instances we'll reuse here represent different options.
  6.      */
  7.     var roars = [
  8.         new Roar(),
  9.         new Roar({
  10.             position: 'upperRight'
  11.         }),
  12.         new Roar({
  13.             position: 'lowerLeft'
  14.         }),
  15.         new Roar({
  16.             position: 'lowerRight'
  17.         })
  18.     ];
  19.  
  20.     /**
  21.      * CSS selector to get the 4 links and iterate over them
  22.      */
  23.     $$('#demo-links a').each(function(anchor, i) {
  24.  
  25.         /**
  26.          * Hey, now I can throw random messages at the user!
  27.          */
  28.         anchor.addEvent('click', function(el) {
  29.  
  30.             /**
  31.              * I take the index of the element as roar instance index.
  32.              */
  33.             roars[i].alert(
  34.                 [
  35.                     "You've got mail!",
  36.                     "News published »Feel the lion roar!«",
  37.                     "1000 visitors tracked today",
  38.                     "Whats that strange text here?",
  39.                     "Try to read that!",
  40.                     "Look ma, without sense!",
  41.                     "No Error occured! Thank you for listening!"
  42.                 ].getRandom(),
  43.                 [
  44.                     "Lorem ipsum laudem labore ex usu. Quo an antiopam repudiandae. Mei ex saepe possit molestie. Novum habemus nominavi pri id. Ad erat vivendo duo, dictas saperet scriptorem id vix, duis quaeque expetenda ex per.",
  45.                     "Tia helpi proto nomial u, nek ro eligi kunigi. Kuo vo sepen neniaĵo malprofitanto, on olda vavo ator ebl. Ind filo veki supersigno de. Neigi akuzativo por ie.",
  46.                     "Kaj jo miria posta itismo. It sia deka zorgi pseudoafikso, jesi kvanta da sub.",
  47.                     "Periodicos excellente publication non tu, de del toto latente religion. Que tu mundial traduction connectiones.",
  48.                     "Por is enen decilitro antaŭmetado. Ki pri egalo ologi alikvante, tioma iufoje monatonomo ko iel. Frida negativaj kvadriliono o tra, hura brosi respondo ali mf. Ali ec kaŭ duonhoro alternativo, log lo timi mikro, ato po nenia postpostmorgaŭ..",
  49.                     "Tot na malju neskolk. Es sxto varijm pridijt des. Sam na sport navestib, morkva jazika cxistju oni mi. Mne bolsx hcejm sxuflad ku. Klet nesxto to mne.",
  50.                     "Actually you should write some more useful in here, these are just word bits to fill the lines!"
  51.                 ].getRandom()
  52.             );
  53.             return false; // cancel the click
  54.         });
  55.  
  56.     });
  57.  
  58. });

HTML:

< View plain text >
HTML

  1. <ul id="demo-links">
  2.     <li><a href="#">Notificacion arriba-izquierda</a></li>
  3.     <li><a href="#">Notificacion arriba-derecha</a></li>
  4.     <li><a href="#">Notificacion abajo-izquierda</a></li>
  5.     <li><a href="#">Notificacion abajo-derecha</a></li>
  6. </ul>

Y el Ultimo ejemplo, Notificaciones con timer:

< View plain text >
js

  1. // This time we use load, to load the whole page, a bit more time
  2. window.addEvent('load', function() {
  3.  
  4.     var roar = new Roar({
  5.         position: 'lowerLeft',
  6.         duration: 5000 // 5 seconds until message fades out
  7.     });
  8.  
  9.     roar.alert('Britney Spears meets Frankenstein', 'The Beast and the Beauty, who is who!');
  10.  
  11.     roar.chain(function() {
  12.         roar.alert('News gone crazy', 'Frankenstein is lost!');
  13.     }).chain(function() {
  14.         roar.alert('Frankenstein dead!', 'Who did it, we know it!');
  15.     }).chain(function() {
  16.         roar.alert('We fired our editor!', 'He only wrote stupid lorem ipsum dummies, hopefully we get better texts for the next showcase!');
  17.     });
  18.  
  19.  
  20. });

Eso es todo, pueden visitar el articulo original dando click aqui.