javascript - 类似 Facebook 的 JavaScript 弹出帮助

Question

如果您查看以下屏幕截图:

您将看到一个弹出框(不是模态)，其中包含一些内容为“安全检查”的内容，这基本上是一些用户可以通过单击链接调用的有用信息。我知道如何使用 jQuery 和简单的 HTML/CSS 创建类似的东西，但查看 Facebook 示例时我注意到源代码中的帮助框不是...

因此它是从其他地方加载的，然后在 DOM 中显示给用户...我将如何创建类似的东西？

谢谢

Answer 1

fiddle :

http://jsfiddle.net/EYghv/

html:

<a href="#">What's this?</a>

<div class="tooltip">
    <div class="triangle"></div>
    <div class="content">
        Security Check:<br/>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </div>
</div>

jquery:

$("a").click(function(e) {
    var x = e.pageX - this.offsetLeft - 20;
    var y = e.pageY - this.offsetTop + 22;
    $(".tooltip").show().css({
        left: x,
        top: y
    }).delay(3000).fadeOut();
    return false;
});

$(".tooltip").click(function() {
    $(this).hide(); 
});

CSS:

.tooltip {
    position:absolute;
    display:none;  
}
.triangle {
    font-size:0px;
    line-height:0px;
    width:0px;
    border-bottom:20px solid #fec;
    border-left:10px solid transparent;
    border-right:10px solid transparent;
    position:relative;
    left:20px;
}
.content {
    background-color:#fec;
    width:300px;
    padding:5px 15px;
}