jquery - make a div appear where I click?

Question

Hey, I'm trying to make a little feature where I can click on an icon, and a box will appear that is similar to lightbox, but anchored on the icon. Is there a way to

1. Tell where the icon is on the screen, and then
2. Have the top left corner of my box placed where the icon is, and then
3. Have my box appear in that location?

Thanks!

Answer 1

// 1.Tell where the icon is on the screen
var off = $("#iconId").offset();

// 2.Have the top left corner of my box placed where the icon is
var div = $("#divId");
div.css({ position: "absolute", top: off.top, left: off.left });

// 3.Have my box appear in that location?
div.show();

Answer 2

$(function() {
    $("#icon").click(function(){
     var offset = $(this).offset();
     $("#pop").css("position","absolute").css("top",offset.top+$(this).height()).css("left",offset.left);
     $("#pop").show();
    });
});

offset gets you the position of your icon and then you use those values to set the top and left offsets for your popup