使用Javascript定位div

Question

我有6个不同的图像和6个不同的弹出窗口，如下所示;

现在，使用Javascript，我想要执行以下操作： 点击任意图片：

1. 获取所点击图像的光标位置。
2. 通过Javascript，将绝对定位的div弹出窗口放在图像的顶部/中心（如图所示）

这应该适用于流畅的布局（％/ top / bottom / right属性，％，no 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();
}