How to show popup message like in stackoverflow

Question

I would like to add a popup message like the one that appears on stackoverflow 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?

Answer 1

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

Answer 2

Also checkout jQuery UI Dialog

Answer 3

Using the ModalPopup in the AJAX control toolkit is another way you can get this effect.

Answer 4

There is similar question. You might want to check that as well.

Answer 5

As a curious developer, I would view the source here and see how it works and then adapt it to my project. This is the best way to learn.

Answer 6

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.

Answer 7

Do you guys know if there is a drupal module which would allow me to do the cool sliding drop down messages like 'First time here? Check out the FAQ!'?

Thanks in advance!

Answer 8

How do you make message bar show only once and not-repeat its appearance if user closes the bar and then reloads the page or if user closes the bar and navigates to another page? Basically seeking to have the same functionality as on StackOverFlow, where if visitor closes the bar on one page... it remains closed on all the subsequent pages of the site.