Отображать всплывающее окно при нажатии ссылки и настройке позиции

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/