スクロールオーバーフローdiv内にポップアップを配置

Question

スクロールdivコンテナ内に最小限のjを入れてポップアップを作成しようとしています。オーバーフロースクロールは不可避です。ポップアップを配置する際の助けを借りて、親の位置を見つけます。位置は固定されています。 （これは絶対的であると思われた）

ここでは、このコードはオーバーフロー：スクロールコンテナの中にあります。ここで

<span class="popover-wrapper right"> 
     <a href="#" data-role="popover" data-target="detailpop">...</a> 
     <div class="popover-modal detailpop"> 
     <div class="popover-header"><%= item.name %> 
     <a href="#" data-toggle-role="close" style="float: right">×</a> 
     </div> 
     <div class="popover-body"> 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi pretium eget enim et iaculis. Pellentesque dapibus id metus sit amet ultrices.</p> 
</div> 

は、ポップオーバー、画面上のクリックに基づいてポップオーバーを配置する方法

.popover-modal{-webkit-box-shadow:0 6px 12px rgba(0,0,0,.175); 
-moz-box-shadow:0 6px 12px rgba(0,0,0,.175); 
box-shadow:0 6px 12px rgba(0,0,0,.175); 
-webkit-transition:all 240ms cubic-bezier(.34,1.61,.7,1); 
-o-transition:all 240ms cubic-bezier(.34,1.61,.7,1); 
transition:all 240ms cubic-bezier(.34,1.61,.7,1); 
-webkit-transform:scale(0); 
transform:scale(0); 
transform-origin:29px -10px; 
opacity:0; 
position:absolute; 
z-index:1000; 
width:300px; 
margin-top:8px; 
border-radius:4px; 
border:1px solid #aab2bd; 
background-color:#fff} 

のためのCSSを行きます。

Answer 1

解決策が見つかりました。

$(document).ready(function(){ 
$('a.d').bind('click', function (event) { 
$('.popover-modal').css('left',event.pageX);  // <<< use pageX and pageY 
$('.popover-modal').css('top',event.pageY);  // <<< also make it absolute! 
}); 
}); 

これをinpageスクリプトに追加すると、位置を追跡して配置することができます。質問を落とした人に感謝します。これを自分で修正することを余儀なくされた。

Answer 2

スクロール可能なdivと同じレベルにポップアップを入れて、両方をコンテナの中に入れてみることができます。次にポップアップをコンテナに絶対配置すると、スクロール可能なdivは100％の高さとなります