jquery - 在我点击的地方出现div？

Question

嘿，我正在尝试制作一个可以点击图标的小功能，然后会出现一个类似于灯箱的框，但是会挂在图标上。有没有办法

1. 告诉屏幕上的图标，然后
2. 将我的框的左上角放在图标所在的位置，然后
3. 我的盒子出现在那个位置吗？

谢谢！

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

偏移可以获得图标的位置，然后使用这些值设置弹出窗口的顶部和左侧偏移