Javascriptを使用した位置指定div

Question

以下に示すように、6種類の画像と6種類のポップアップがあります。画像のいずれかをクリックするだけで ：今

は、JavaScriptを使用して、私は次の操作を行いたい

1. がクリックされた画像のカーソル位置を取得します。 Javascriptを介し
2. （図に示されているように）、画像の上部/中心における絶対配置DIVポップアップを配置

これは、流体レイアウトで動作する必要があり（左/上/下/右％の属性、 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(); 
}