FacebookのようなJavaScriptのポップアップヘルプ

Question

次のスクリーンショットを見れば：

あなたは、基本的には、いくつかの役に立つ「セキュリティチェック」を言う一部のコンテンツをポップアップボックス（NOT MODAL）が表示されますユーザーがリンクをクリックして呼び出すことができる情報私はjQueryとシンプルなHTML/CSSを使って同様のものを作成する方法を知っていますが、Facebookの例を見て私はヘルプボックスがソースではないことに気付きました...

したがって、 DOM内のユーザーに表示されます...私はどのように似たようなものを作りますか？

おかげ

Answer 1

あなたはポップアップdiv要素にロードするために​​を使用することができます。

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

フィドル：http://jsfiddle.net/maniator/RjxbQ/show/

コード：http://jsfiddle.net/maniator/RjxbQ/

ポップアップ：http://jsfiddle.net/maniator/83L52/

Answer 2

あなたは変数に要素を保存し、必要に応じてそれを挿入することができます。

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

Answer 3

フィドル：

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