34

我爱上了 stackoverflow 的单色“点击关闭”悬停对话框，当用户尝试投票并且没有登录或错误使用该网站时，它会向用户致意。知道 Jeff 使用的方式和/或什么技术实现这些整洁的小设备？

编辑：我专门谈论在它们上显示“单击以关闭”的 SQUARE 对话框。我知道如何在屏幕顶部实现矩形条。

4

2 回答 2

51

虽然我的印象是他们为此使用了 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，它真的很棒，并且可以让这个实现变得微不足道。

于 2009-04-17T04:46:19.057 回答
2

您可以将jQuery库与jQuery UI结合使用来创建对话框。

于 2009-04-17T03:39:02.383 回答