類似Facebook的JavaScript彈出幫助

Question

如果你看看下面的截圖：

你會看到一個彈出框（非模態）一些內容，上面寫着「安全檢查」，這基本上是一些有用的用戶可以通過點擊鏈接調用的信息。我知道如何創建一個使用jQuery和簡單的HTML/CSS但看着Facebook的例子類似的事情我已經注意到，幫助框沒有在源 ...

因此它在加載從別的地方然後顯示給DOM中的用戶......我將如何創建類似的東西？

感謝

Answer 1

您可以使用​​將其加載到彈出股利。

$('#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; 
}