Ajax Popup alert

Question

I'm looking to do functionality similar to Stackoverflow where in certain instances I want to show a user important info like:

You have 2 new answers and 1 new comment. See your responses.

This shows up in a orangish div on the top of the screen as a sort of alert and has a X on it to kill the window.

I would like to do this using jQuery as that is my library of choice. Any tutorials or code samples you can send my way?

Thanks

Answer 1

For this, you'll want to combine two concepts:

The first is having a div that shows at the top of the page. Take a look at this tutorial, which shows you how to place <div>s over top of each other. Essentially, you'll want your info bar placed at the top with a z-order of something larget than everything else in the same spot.

Once you have it where you want it, you'll then need to fade it in or out. This article will show you what is required to fade in/out divs using javascript.

Just set the area's opacity to 100% and fade it in when the page loads. Then have a link or button that calls the javascript to fade out if you want to close it (or do it after a certain time).