我如何实现stackoverflow的悬停对话框？

Question

我爱上了stackoverflow的单色"点击关闭"悬停对话框,当用户尝试投票并且未登录或未正确使用网站时,会对用户表示问候.任何想法如何和/或Jeff使用的技术实现这些整洁的小设备？

编辑:我特别谈到SQUARE对话框,上面写着"点击关闭".我知道如何在屏幕顶部实现矩形条.

Answer 1

虽然我的印象是他们使用了jQuery的UI对话框,但我不太确定了.但是,自己鞭打它并不困难.试试这段代码:

$('.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(); });
});

有了这些风格:

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

然后点击这里查看它的实际效果.

但是,我认为您仍然需要稍微调整一下,根据您使用它的情况给它正确的位置.我为左侧位置处理了这个问题,因为它适用于顶部,但我认为可能会出现一些情况.考虑到所有事情,这应该让你开始.如果你想要一个更强大的实现,你应该查看jQuery BeautyTips,它真的很棒,并且可以实现这一点.