2017-05-23 150 views
0

我一直在嘗試使滾動div容器內的最小js彈出。溢出滾動是不可避免的。尋找一些幫助,以放置彈出尋找父母的位置,與位置:固定。 (這應該是絕對的)定位滾動內溢出div

這裏是HTML代碼,這段代碼位於Overflow:Scroll容器中。

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

這裏去了CSS的酥料餅

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

如何根據屏幕上的點擊酥料餅的位置。

回答

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腳本中可以跟蹤位置並將它放置它們。感謝那些低估了這個問題的人。我強迫自己解決這個問題。

0

您可以嘗試將彈出窗口放在與可滾動div相同的級別,並將其放入容器中。然後,您可以將彈出窗口絕對放置到容器中,並且可滾動的div將爲100%和高度