[jQuery] Re: having an issue with the blockUI plugin - the growl option

[Jeremy Mikola]

Not sure what is triggering the Javascript error you mentioned, but
I'm doing the exact thing you're attempting with the following JS/CSS:

  /**
   * Generates a Growl-style overlay.
   *
   * @see jquery.blockUI.js
   * @param string   title
   * @param string   message
   * @param string   icon    URL of icon image (default: see
jquery.blockUI.css)
   * @param string   link    HTML for footer link
   * @param integer  timeout Milliseconds to persist (default: 5000)
   * @param callback onClose
   */
  window.showGrowlOverlay = function(title, message, icon, link,
timeout, onClose) {

    var $m = $('<div class="growlOverlay"></div>');
    if (title)   $m.append('<div class="title">'+title+'</div>');
    if (icon)    $m.append('<div class="icon"><img src="' + icon + '"/
></div>');
    if (message) $m.append('<div class="message">'+message+'</div>');
    if (link)    $m.append('<div class="link">'+link+'</div>');
    if (timeout === undefined) timeout = 5000;

    $m.click($.unblockUI);

    $.blockUI({
      message: $m, fadeIn: 700, fadeOut: 1000, centerY: false,
      timeout: timeout, showOverlay: false, onUnblock: onClose,
      css: $.extend({}, $.blockUI.defaults.growlCSS, { opacity: 0.8 })
    });
  };

----

And the CSS:


/* Custom CSS used by window.showGrowlOverlay (see: overlays.js) */
div.growlOverlay div.title,
div.growlOverlay div.message,
div.growlOverlay div.link {
  color: #fff;
  margin: 0;
  padding: 5px;
  text-align: left;
}

div.growlOverlay div.title { font-size: 22px; }
div.growlOverlay div.message { font-size: 12px; }
div.growlOverlay div.link { font-size: 18px; }

div.growlOverlay div.message ul {
  margin: 0.5em 0 0.5em 2em;
  list-style: disc outside;
}

div.growlOverlay div.icon img {
  float: left;
  margin: 0px 10px 10px;
  background-color: #fff ;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border: 5px solid #fff ;
}