How does Stackoverflow do the "You earned a new badge" window?

Question

Possible Duplicates:
Notify panel similar to stackoverflow’s
How to show popup message like in stackoverflow

How does Stackoverflow do the "You earned a new badge" window? (the orange one that pops up at the top of the screen, I believe its the one that shows you the FAQ when your not logged in).

Anyone have a code sample to do this? (with the button to close the window also?)

Because you won't see it in the source code and will have to follow some links to external scripts/CSS files. — schnaader, Jun 20 '09 at 06:12
the server side code is far more interesting in this case :) — dfa, Jun 20 '09 at 06:19
look at some CSS libraries like Dojo etc which have these effects. — Grouchal, Jun 20 '09 at 06:38
http://stackoverflow.com/questions/659199/how-to-show-popup-message-like-in-stackoverflow/659243#659243 — Talljoe, Jun 20 '09 at 06:08

score 5 · Answer 1 · answered Jun 20 '09 at 06:08

This is a very simple excersise in HTML, CSS, and DOM manipulation. Take a look at http://jquery.com to add effects, etc...

Using these styles in your css:

#banner
{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background-color: #aaf;
    color: #000;
    font-size: 1.5em;
    padding: .5em;
    z-index: 100;
}

And this HTML on yourpage:

<div id="banner">
    Your text here
    <a href="#" onclick="document.getElementById('banner').style.display = 'none'; return false;">close</a>
</div>

Should do the trick. Play with the styles, etc... to make it look nice.

How does Stackoverflow do the "You earned a new badge" window?

1 Answers1