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.
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.
