单击链接并调整位置时显示弹出窗口(Display popup when clicking link and adjusting position)

单击链接并调整位置时显示弹出窗口(Display popup when clicking link and adjusting position)

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

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

I am trying to create a little popup next to a link on my page. I need this to be dynamic because the number of links generated is random. I want the box to display next to the link each time, so this requires adjusting the position to new coordinates my question is how do I programtically determine where to move the box based on what link is clicked? I am not sure how to approach this and am looking for some suggestions.

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

最满意答案

您可以尝试这个 - （ 您可以在左侧和顶部添加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/

You can try this - (you can add width and height of a to the left and top to show box at proper position)

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

Demo -----> http://jsfiddle.net/esEP8/2/