如何实现stackoverflow的悬停对话框？ [英] How would I implement stackoverflow's hovering dialogs?

问题描述

我在 爱 中使用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对话框，但我不太确定，但是，自己不要太吝啬，请试试这个代码：

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.

这篇关于如何实现stackoverflow的悬停对话框？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！