jquery - 单击链接并调整位置时显示弹出窗口

Question

我正在尝试在我的页面上的链接旁边创建一个小弹出窗口。我需要它是动态的，因为生成的链接数量是随机的。我希望该框每次都显示在链接旁边，因此这需要将位置调整到新坐标，我的问题是如何根据单击的链接以编程方式确定将框移动到哪里？我不确定如何解决这个问题，正在寻找一些建议。

HTML

<div style="display: none; border: 1px solid black; height: 150px; width: 250px; 
       padding: 5px; position: absolute; left: 100px; top: 100px; 
       background-color: silver;" id="messageBox">
    <textarea style="width: 225px; height: 115px;"></textarea>
    <button id="save" style="float: right;">Save</button>
</div>

<div class="productLine">
    <a href="#">Link #1</a><br /><br />
    <a href="#">Link #2</a><br /><br />
</div>
<br />
<div class="productLine">
    <a href="#">Link #3</a><br /><br />
    <a href="#">Link #4</a><br /><br />
</div>

jQuery:

$('.productLine a').click(function() {
    $('#messageBox').toggle();
});

Answer 1

您可以尝试这个 - (您可以在左侧和顶部添加 a 的宽度和高度，以在适当的位置显示框)

$('.productLine a').click(function () {
    var $this = $(this);
    $('#messageBox').css({
        left: $this.position().left + $this.width(),
        top: $this.position().top,
    }).toggle();
});

演示 -----> http://jsfiddle.net/esEP8/2/