How to show popup message like in Stack Overflow

I would like to add a popup message like the one that appears on Stack Overflow when I am not logged in and I try to use voting buttons.

What is the best method for achieving that? Is it done using a jquery library?

Solution 1:

EDIT: The code below shows how to replicate the bars that show at the top of the screen when you get a new badge, first come to the site, etc. For the hovering dialogs that you get when you try to comment too fast, vote for your own question, etc, check out this question where I show how to do this or just go straight to the example.

Here's how Stackoverflow does it:

This is the markup, initially hidden so we can fade it in:

<div id='message' style="display: none;">
    <span>Hey, This is my Message.</span>
    <a href="#" class="close-notify">X</a>
</div>

Here are the styles applied:

#message {
    font-family:Arial,Helvetica,sans-serif;
    position:fixed;
    top:0px;
    left:0px;
    width:100%;
    z-index:105;
    text-align:center;
    font-weight:bold;
    font-size:100%;
    color:white;
    padding:10px 0px 10px 0px;
    background-color:#8E1609;
}

#message span {
    text-align: center;
    width: 95%;
    float:left;
}

.close-notify {
    white-space: nowrap;
    float:right;
    margin-right:10px;
    color:#fff;
    text-decoration:none;
    border:2px #fff solid;
    padding-left:3px;
    padding-right:3px
}

.close-notify a {
    color: #fff;
}

And this is javascript (using jQuery):

$(document).ready(function() {
    $("#message").fadeIn("slow");
    $("#message a.close-notify").click(function() {
        $("#message").fadeOut("slow");
        return false;
    });
});

And voila. Depending on your page setup you might also want to edit the body margin-top on display.

Here is a demo of it in action.

Solution 2:

Also checkout jQuery UI Dialog

Solution 3:

I use jqModal, easy to use and you can achieve some great effects