How would I implement stackoverflow’s hovering dialogs?

I am in love with stackoverflow’s single-color “click-to-close’ hovering dialog boxes that greet a user when they try to vote and aren’t logged in or use the site incorrectly. Any idea how and/or what technology Jeff used to implement these neat little devices?

EDIT: I’m specifically talking about the SQUARE dialog boxes that say “Click To Close” on them. I know how to implement the rectangular strip on the top of the screen.

9 thoughts on “How would I implement stackoverflow’s hovering dialogs?”

  4. user

    Reading the source is tough with all the minification, but you can get some clues. For example, the flag link for your question is an anchor with id "flag-post-758906". I suggest searching question.min.js for the string "flag-post" and seeing what you'll find (as I don't have room in this comment)

    Reply ↓
  6. user

    Hey Paolo. I wasn't asking about the messages that get shown on the top of the screen. I know how to do that. I was asking about the messages that appear when a user tries to vote and is not logged in, etc.

    Reply ↓
  9. user

    Although I was under the impression they used jQuery’s UI Dialog for this, I am not too sure anymore. However, it is not too difficult to whip this up yourself. Try this code:

    $('.showme').click(function() {
    $('.error-notification').remove();
    var $err = $('<div>').addClass('error-notification')
                         .html('<h2>Paolo is awesome</h2>(click on this box to close)')
                         .css('left', $(this).position().left);
    $(this).after($err);
    $err.fadeIn('fast');
});
$('.error-notification').live('click', function() {
    $(this).fadeOut('fast', function() { $(this).remove(); });
});

    With these styles:

    .error-notification {
    background-color:#AE0000;
    color:white;
    cursor:pointer;
    display: none;
    padding:15px;
    padding-top: 0;
    position:absolute;
    z-index:1;
    font-size: 100%;
}

.error-notification h2 {
    font-family:Trebuchet MS,Helvetica,sans-serif;
    font-size:140%;
    font-weight:bold;
    margin-bottom:7px;
}

    And click here to see it in action.

    However, I think you’d still need to tweak it a little bit to give it the right positions depending on the situation in which you are using it. I took care of this for the left position because it is working for the top, but I think there may be some situations in which it won’t. All things considered, this should get you started. If you want a more robust implementation, you should check out jQuery BeautyTips which is really awesome and would make this trivial to implement.

    Reply ↓

Leave a Reply

Your email address will not be published.