1

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

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

2 回答 2

5

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

于 2013-06-20T14:41:21.773 回答
0

使用单击的链接position().left和position().top定义弹出位置。此外，最好使用on而不是click. 这是代码：

$('.productLine').on('click', 'a', function() {
  $('#messageBox').hide().css({
    left: $(this).position().left + $(this).outerWidth(false),
    top: $(this).position().top
  }).show();
});

jsfiddle：http: //jsfiddle.net/9XTT6/2/

于 2013-06-20T14:46:24.400 回答