Question

I need to implement for my Grails web site something similar to the orange and closable dialog that appears on the top of the StackOverflow website whenever SO detects that it is your first visit. (for a demo, just start your browser in Private/Incognito mode and go to
http://www.stackoverflow.com)

I am interested mainly in the front-end component.

Do you know where I can find a JavaScript/CSS/HTML library and/or code that will do the job?
Or maybe you do have the code source directly?

Answer 1

It is really as simple as creating a CSS style for a div, something like this:

div.notification
{
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    height: 20px;
    z-index: 1000;
    /* style it the way you want; background, font-weight etc. */
}

and then when you want to show a notification, you add a div with this class to the DOM. For example, with jQuery:

function displayNotification(text)
{
    var notification = $('<div></div>')
        .addClass('notification')
        .text(text)
        .click(function() { notification.remove(); });
    $('body').append(notification);
}

displayNotification('Hello World!');

Of course you can make it more advanced, but this is the basic idea.