我该如何实现类似于Stack Overflow的悬停对话框？

Question

我该如何实现类似于Stack Overflow的悬停对话框？

javascriptjquerydialogpopup

34

我喜欢stackoverflow的单色“点击关闭”悬停对话框，它们在用户尝试投票但未登录或错误地使用网站时向其问候。你知道Jeff使用什么技术来实现这些漂亮的小工具吗？

编辑：我特别指的是方形对话框上面写着“点击关闭”。我知道如何实现屏幕顶部的矩形条。

- CodingWithoutComments

看看源代码？它们似乎并不太复杂。 - matt b

1

我很难找到我所指的对话框的实际代码，你能贴出代码吗？ - CodingWithoutComments

阅读源代码时，由于所有的缩小处理，可能会很困难，但您可以获得一些线索。例如，问题的标记链接是一个带有ID“flag-post-758906”的锚点。我建议在question.min.js中搜索字符串“flag-post”，看看您会发现什么（因为我在此评论中没有足够的空间）。 - Kyle Cronin

1

如何像StackOverflow一样显示弹出消息？如何在不刷新页面的情况下在屏幕上显示消息，就像此处所示？ - Paolo Bergantino

嘿，Paolo。我不是在问屏幕顶部显示的消息。我知道怎么做那个。我是在问当用户尝试投票但未登录时出现的消息。 - CodingWithoutComments

显示剩余2条评论

2个回答

2

您可以使用jQuery库与jQuery UI一起创建对话框。

- cletus

如果你还没有尝试过JQuery，它非常优秀，微软可能会使用它来替代修复Microsoft Ajax。MS Ajax有三种工作方式：声明式（aspx）、JavaScript和XMLscript。Ajax 4应该具有客户端ListView JavaScript函数，其中包括{data tag}替换，类似于repeater。 - Zachary Scott

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Paolo Bergantino · Accepted Answer

虽然我曾经认为他们使用jQuery UI Dialog来实现这个，但现在我不太确定了。然而，自己动手实现也并不难。尝试使用这段代码：

$('.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，它非常棒，可以轻松实现此功能。