Как из разных мест открывать одну и ту же форму

[mankutila]

Доброе время суток.

 

На сайте есть 5 одинаковых кнопок .main-btn, по наведению на которые под кнопкой появляется форма .popover-form.

<div class="main-btn free-call">  <p><a href="#">Воспользуйтесь бесплатным обратным звонком</a>  <br/>  <i class="glyphicon glyphicon-chevron-down"></i>  <form class="popover-form question-form">      <label for="">Ваше имя</label><input type="text">                        <label for="">Ваш E-mail</label><input type="text" value="">      <label for="">Задайте вопрос:</label>                         <textarea></textarea>      <button>Задать вопрос</button>  </form></div>

Я убрала из кода кнопок .main-btn формы, чтобы их не было 5 разных, а всего одна. Вставила код формы в конец документа. .При наведении на кнопку,  форма показывается с помощью jQuery . Но вот проблема: когда форма была внутри кода кнопки, все было хорошо с позиционированием, поскольку у формы установлео top: 87px (высота кнопки) и она появлялась строго под кнопкой, независимо от того, на какую из 5 кнопок я навожу указатель. А в конце документа position: absolute у формы срабатывает уже относительно body, мне это не нужно. Как сделать так, чтобы и форма была одна-единственная, и чтобы под всеми кнопками появлялась корректно? Спасибо.

Edited May 24, 2015 by mankutila

[antonKar]

Определять через offset позицию кнопки и относительно полученных данных позиционировать форму.

Edited May 25, 2015 by antonKar

[mankutila]

Определять через offset позицию кнопки и относительно полученных данных позиционировать форму.

Спасибо! Проблема решилась. Только к offset нужно еще воспользоваться scrollTop, чтобы форма позиционировалась относительно верха вьюпорта, а не относительно начала документа

[antonKar]

Только к offset нужно еще воспользоваться scrollTop, чтобы форма позиционировалась относительно верха вьюпорта, а не относительно начала документа

У вас position: fixed что ли? Зачем? С absolute проще, вам при fixed надо ещё событие скролла мыши отслеживать и переопределять top. А absolute задан один раз и всё, его переопределять надо только при resize и/или load.