使用Javascript定位div

Question

我有6個不同的圖像和6種不同的彈出窗口，如下所示;

現在，使用Javascript，我要做到以下幾點： 在任何圖像點擊：

1. 獲取點擊的圖像的光標位置。
2. 通過JavaScript，將絕對定位的div彈出在圖像的頂部/中心（如圖2中所示）

這應在流體佈局工作（左/頂部/底部/右％屬性，沒有像素），也因爲瀏覽器被調整大小。

下面是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(); 
}