Question

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.

Answer 1

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.