Позиционирование div с использованием Javascript

Question

У меня есть 6 разных изображений и 6 разных всплывающих окон, как показано ниже;

Теперь, с помощью Javascript, я хочу сделать следующее: При нажатии на любое изображение:

1. Получить позицию курсора для изображения, по которому щелкнули.
2. С помощью Javascript поместите всплывающее окно с абсолютным позиционированием в верхней / центральной части изображения (как показано на рис.)

Это должно работать в жидких макетах (атрибуты left / top / bottom / right в%, без px), а также при изменении размера браузера.

Ниже приведен HTML-код;

<div><img src="images/book1.gif" /></div>
<div class="resPadDtp">
    <ul class="resDtp2 lightblktxt txtSmall">
        <li class="resDtpPad"><span>Some text 1</span></li>
    </ul>
</div>
<div><img src="images/book2.gif" /></div>
<div class="resPadDtp">
    <ul class="resDtp2 lightblktxt txtSmall">
        <li class="resDtpPad"><span>Some text 2</span></li>
    </ul>
</div>

Answer 1

Я собираюсь сделать несколько образованных предположений относительно того, что вы хотите, и дать вам несколько скелетных JS.Поскольку вы предоставили даже не базовый HTML, вам придется адаптировать его к вашей конкретной ситуации.

$popup = $('div#popup');    // change 'div#popup' selector to your absolutely positioned div
$('img').click(function() { // change 'img' selector to be more specific
  var imgpos = $(this).offset();  // object with left and top properties
  var imgwid = $(this).width();
  var popupwid = $popup.width();
  var popuphgt = $popup.height();
  var popupleft = imgpos.top - popuphgt;
  var popuptop = imgpos.left + imgwid/2 - popupwid/2;
  $popup.css({left: popupleft, top: popuptop}).show();
}