类似Facebook的JavaScript弹出帮助

Question

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

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

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

由于

Answer 1

小提琴：

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

Answer 2

您可以使用.load()将其加载到弹出式div中。

$('#popupDiv').load('popurl.html');

小提琴：http://jsfiddle.net/maniator/RjxbQ/show/

代码：http://jsfiddle.net/maniator/RjxbQ/

弹出式广告：http://jsfiddle.net/maniator/83L52/

Answer 3

您可以将元素存储在变量中并根据需要插入。这种方法很适合模板化（制作一个模板弹出窗口，你可以插入一个字符串或其他内容）：

var myPopup = "<div class='my_popup'>Some Helpful Whatnot</div>";
$('#some_link_id').live('mouseenter', function() {
    $('#some_link_id').append(myPopup);
});