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

2022-01-15 00:00:00 dialog popup jquery javascript

我在 love 中使用 stackoverflow 的单色点击关闭"悬停对话框，当用户尝试投票但未登录时会向他们致意不正确地使用或使用该网站.知道 Jeff 如何和/或使用什么技术来实现这些整洁的小设备吗?

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?

我特意说的是 SQUARE 对话框，上面写着单击以关闭".我知道如何实现屏幕顶部的矩形条.

推荐答案

虽然我的印象是他们为此使用了 jQuery 的 UI Dialog，但我不太确定了.但是，自己动手并不太难.试试这个代码:

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

使用这些样式:

.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 这真的很棒，而且实现起来很简单.

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.

相关文章