How to show popup message like in Stack Overflow

stackoverflow
what happened to stack overflow
stack overflow isn’t very welcoming
how does stack overflow work
coding stack exchange
copying code from stackoverflow
stack exchange rules
stack overflow questions

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?

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.

how to show the popup message on Exit button, JavaScript: <input type="button" value="Exit" onclick="confirmBox()" /> function confirmBox(){ if (confirm('Are you sure you want to Exit? Browse other questions tagged jsf popup message or ask your own question.

Also checkout jQuery UI Dialog

What a very bad day at work taught me about building Stack , I'm the new Director of Public Q&A at Stack Overflow. I've been at Stack for a year now, and I'd like to share with you one of my worst days at What happened next was that, from my point of view, the engineering team completely lost it. that aren't already asked before” – i.e, a cleaner message is better. Stack Overflow Public questions and answers; You can design your layout as you like. (R.string.message)); then finally show the pop up menu.

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

Nissan app developer busted for copying code from Stack Overflow , That's because there are question-and-answer sites like StackOverflow.com, where any developer can post a programming-related question  In my Windows 8.1 app I used MessageBox.Show() to popup a message. That is gone in UWP. Stack Overflow Public questions and answers; indeed something like

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

Getting email notifications when comments or answers are posted , My phone dings, my browser has a little pop up and my dog barks every time I get an email. StackExchange email options and have it set to email me unread messages Sounds like StackOverflow email is busted, as I have this problem too, though My iphone now shows notifications of responses, etc, as they happen! I have a popup which displays a message to the user which says their information has been submitted.The popup div's id NewCustomerStatusPopUp,I want this popup to be displayed when the information has been successfully inserted in the database , so how do I call the javascript function to show popup when all the information has been submitted

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.

Stack overflow, For other uses, see Stack overflow (disambiguation). In software, a stack overflow occurs if the call stack pointer exceeds the stack bound. The call stack.push(​argument); while (!stack.empty()) { argument = stack.pop(); if (condition) possible for this function. During execution, the stack for these functions will look like this:  Stack Overflow for Teams is a private, secure spot for you and your coworkers to find and share information. Learn more How to show popup message like in Stack Overflow

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  Stack Exchange network consists of 177 Q&A communities including Stack Overflow, the largest, most trusted online community for developers to learn, share their knowledge, and build their careers.

Introducing Stackoverflow.com, If I look at the people I respect most in the industry, the people I view as role Stackoverflow is sort of like the anti-experts-exchange (minus the audio messages is nice way to build such a “dialog” with developers for sure  Program call stack sizes are strictly limited. If you put too many calls on the stack, it will overflow. A common way this can occur is if a recursive function (a function that calls itself) where there is a bad case or exit condition. The function will keep calling itself over and over, filling up the stack and causing the overflow.

Data Structures and Algorithms Using C+, |05 Tio Pop After Pop After popping 5 popping 1 0 Figure 6.5 Pop operation Push and Pop are If not (i.e., if the stack is empty) it displays a message that the stack is empty. [Check for stack overflow] If Top=N then write: "stack overflow" and 

Comments
  • View the source!
  • There is similar question. You might want to check that as well.
  • i did that, and it seemed to refer to question.min.js I could not find that plugin so I asked the question
  • Dojo has an UpgradeBar that does this: trac.dojotoolkit.org/browser/branches/1.6/dojox/widget/… trac.dojotoolkit.org/browser/branches/1.6/dojox/widget/…
  • 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, Thanks for leaving this up! I think this may work quite a bit better than what I was using for this action.
  • While not the answer, equally helpful :P
  • 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.
  • I wish I could star an answer too. Thanks for this excellent entry!
  • please comment the downvote, using a modal popup is perfectly valid for what the original question asked.