How to show popup message like in Stack Overflow

Question

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?

i did that, and it seemed to refer to question.min.js I could not find that plugin so I asked the question — Puneet, Mar 18 '09 at 17:18
Dojo has an UpgradeBar that does this: http://trac.dojotoolkit.org/browser/branches/1.6/dojox/widget/UpgradeBar.js http://trac.dojotoolkit.org/browser/branches/1.6/dojox/widget/UpgradeBar — mwilcox, Mar 04 '11 at 17:33
There is [similar](http://stackoverflow.com/questions/604577/how-to-display-a-message-on-screen-without-refreshing-like-so-does) question. You might want to check that as well. — Shoban, Mar 18 '09 at 17:11

score 154 · Answer 1 · edited May 23 '17 at 12:25

154

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.

edited May 23 '17 at 12:25

Community

1
1

answered Mar 18 '09 at 17:13

Paolo Bergantino

480,997
81
517
436

3

Re-reading the question I don't think this is what the Op wanted. I think he's looking for the boxes that appear as notices around the site near whatever you do. I guess I'll leave this up anyways. – Paolo Bergantino Mar 18 '09 at 17:30
Paolo, Thanks for leaving this up! I think this may work quite a bit better than what I was using for this action. – Jayrox Mar 18 '09 at 17:58
3

While not the answer, equally helpful :P – rball Mar 18 '09 at 18:05
You also need to set a cookie when you click the X so that it doesn't keep appearing as you go to more pages. – DisgruntledGoat Dec 07 '09 at 14:38
@Goat: The way I use this I only show the message once even if they don't click on the X, so I take care of it on the server-side. – Paolo Bergantino Dec 07 '09 at 20:29
1

I wish I could star an answer too. Thanks for this excellent entry! – cringe Sep 09 '10 at 11:37
[here](http://stackoverflow.com/questions/2983899/does-jquery-have-a-plugin-to-display-a-message-bar-like-the-twitter-wrong-pas) is another to **show notfcation messages top of page** – Shaiju T Jun 23 '16 at 13:58

score 5 · Answer 2 · answered Mar 18 '09 at 17:10

5

Also checkout jQuery UI Dialog

answered Mar 18 '09 at 17:10

jonstjohn

59,650
8
43
55

score 4 · Answer 3 · answered Mar 18 '09 at 17:07

4

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

answered Mar 18 '09 at 17:07

juan

80,295
52
162
195

score 4 · Answer 4 · answered Mar 18 '09 at 17:10

4

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

answered Mar 18 '09 at 17:10

patjbs

4,522
3
23
18

1

please comment the downvote, using a modal popup is perfectly valid for what the original question asked. – patjbs Mar 18 '09 at 17:28

dotjoe · Answer 5 · 2011-03-11T22:49:07.623

Here's what I found from viewing the StackOverflow source. Hopefully saves some time for someone. The showNotification function is used for all those popup messages.

var showNotification=function(jClicked,msg){master.showErrorPopup(jClicked.parent(),msg)};
var showFadingNotification=function(jClicked,msg){master.showErrorPopup(jClicked.parent(),msg,true)};

//master...
showErrorPopup: function (e, h, f) {
    var g = $('<div class="error-notification supernovabg"><h2>' + h + "</h2>" + (f ? "" : "(click on this box to dismiss)") + "</div>");
    var i = function () {
        g.fadeOutAndRemove()
    };
    $(e).append(g);
    g.click(i).fadeIn("fast");
    setTimeout(i, (f ? Math.max(2500, h.length * 40) : 1000 * 30))
}

css

.error-notification{z-index:1;cursor:pointer;display:none;position:absolute;padding:15px;-moz-box-shadow:2px 2px 5px #000;-webkit-box-shadow:2px 2px 5px #000;box-shadow:2px 2px 5px #000;}
.error-notification a{color:inherit;text-decoration:underline;}
.error-notification li{font-size:110%;padding-top:3px;}
.supernovabg{color:#fff !important;background-color:#fe7a15 !important;}

It's cool how they use the length of the message to set the fading timeout. I didn't realize all the (non-fading style) messages actually fade out after 30 seconds.

score 0 · Answer 6 · answered Dec 27 '12 at 22:47

0

Check bootstrap. There are some pop-up effects, modals, transitions, alerts, everything based on javascript and css.

answered Dec 27 '12 at 22:47

steven967

123
2
4
16

How to show popup message like in Stack Overflow

6 Answers6

Linked

Related