类似Facebook的JavaScript弹出式帮助

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

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

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

谢谢

您可以使用.load将其加载到弹出的div中

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

小提琴：

代码：

Popup:

您可以使用.load将其加载到Popup div中

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

小提琴：

代码：

---

弹出窗口：

您可以将元素存储在变量中，并根据需要插入它。此方法非常适合模板制作，可以在其中插入字符串或其他内容：

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

---

您可以将元素存储在变量中，并根据需要插入它。此方法非常适合模板制作，可以在其中插入字符串或其他内容：

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

小提琴：

html:

css:

小提琴：

html:

css:

---

“如果我不想使用假页面怎么办？”卡梅隆，我加了一把小提琴demo@cameron，现在弹出窗口加载鼠标所在的位置。如果我不想使用假页面怎么办？@Cameron，我加了一把小提琴demo@cameron，现在弹出窗口将加载鼠标所在的位置。您可以按照下面的答案从头开始创建它，也可以使用jQuery工具提示插件。有几十个。。。qTip2就是一个例子。您可以按照下面的回答从头开始创建它，也可以使用jQuery工具提示插件。有几十个。。。qTip2就是一个例子。

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