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/

Answer 2

使用点击后的链接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/

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

2 个答案: