How would I implement stackoverflow's hovering dialogs? How would I implement stackoverflow's hovering dialogs? javascript javascript

How would I implement stackoverflow's hovering dialogs?


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.


You can use the jQuery library in conjunction with jQuery UI to create dialogs.