Platzieren Sie ein Popup in einem Bildlaufüberlauf div

Question

Ich habe versucht, ein Popup mit minimalen js innerhalb des Scroll Div-Containers zu machen. Überlauf Scroll ist unvermeidlich. Suchen Sie nach Hilfe beim Platzieren des Popups, um die Position des Elterns zu finden, mit position: fixed. (Das sollte absolut sein)

Hier geht der HTML-Code, Dieser Code ist in einem Überlauf: Scroll-Container.

<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> 

Hier geht die CSS für die popover

.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} 

Wie die popover auf dem Klick auf dem Bildschirm basiert positionieren.

Answer 1

Eine Lösung gefunden, könnte dies hilfreich sein.

$(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! 
}); 
}); 

Wenn Sie dies dem Inpage-Skript hinzufügen, können Sie die Position nachverfolgen und platzieren. Danke für die Person, die die Frage abgelehnt hat. Gezwungen, das selbst zu beheben.

Answer 2

Sie können versuchen, das Popup auf dieselbe Ebene wie das scrollbare div zu setzen und beide in einen Container zu legen. Dann können Sie das Popup absolut auf den Container positionieren, und der scrollbare div wird 100% von und mit