开发者

Facebook-like JavaScript popup help

开发者 https://www.devze.com 2023-03-15 14:52 出处:网络
If you look at the following screenshot: You will see a popup box (NOT THE MODAL) with some content that says \'Security Check\' which is basically some helpful information that the user can invoke

If you look at the following screenshot:

Facebook-like JavaScript popup help

You will see a popup box (NOT THE MODAL) with some content that says 'Security Check' which is basically some helpful information that the user can invoke by clicking a link. I know how to create similar things using jQuery and simple HTML/CSS but looking at the Facebook example I have noticed that the help box IS NOT in the source...

Therefore it is being load开发者_开发百科ed in from somewhere else and then displayed to the user in the DOM... how would I create something similar?

Thanks


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


You can use .load() to load it into the popup div.

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

Fiddle: http://jsfiddle.net/maniator/RjxbQ/show/

Code: http://jsfiddle.net/maniator/RjxbQ/

Popup: http://jsfiddle.net/maniator/83L52/


You can store the element in a variable and insert it as desired. This method lends itself well to templating (making a template popup that you can insert a string or whatever into):

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

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号