模式打开时无法滚动。

当用户选择模态链接时，隐藏了主体溢出，但即使模式为溢出：auto，模式的滚动也会隐藏。我希望模式能够在没有叠加层背后滚动的情况下进行滚动。模式打开时无法滚动。

HTML

<a>View Proposal Details</a> 
<div class='popup'> 
<div class="popup-body"> 
       Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Nulla lobortis quis mauris tristique rutrum. Suspendisse nisi turpis, pharetra porta porta eu, interdum ac eros. Praesent nisl nunc, laoreet ut consectetur sed, interdum ac ligula. Aliquam sit amet efficitur velit. Donec malesuada nec est ac feugiat. Nam gravida ornare volutpat. Vivamus ipsum mi, laoreet sed mattis id, rutrum sit amet massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. 

Nullam congue auctor ligula at venenatis. Integer varius tortor quis lacus luctus, vel dignissim leo tincidunt. Aliquam eleifend cursus vulputate. Sed vitae dolor at elit porta tristique. In quam arcu, posuere ac lorem nec, finibus imperdiet nibh. Etiam eu tincidunt metus, nec tristique eros. Nullam tempor lorem sed sapien scelerisque, nec rutrum risus tempor. Sed blandit ipsum accumsan ipsum porta consectetur. Curabitur imperdiet justo non purus euismod blandit. Ut cursus dolor mauris, vitae sagittis nisl sagittis at. Sed in feugiat nisi. Pellentesque egestas mi a mi dictum, vel posuere risus malesuada. Etiam tincidunt volutpat neque, vel lobortis orci tristique in. In hac habitasse platea dictumst. Nullam sed rutrum orci. 

Proin pellentesque arcu ut justo ullamcorper dignissim. Sed eget enim sed nibh convallis maximus ac ac odio. In tortor risus, luctus sit amet enim non, luctus faucibus leo. Nulla nec mauris vitae mauris tincidunt mollis nec sit amet velit. Proin gravida neque eu eros blandit vulputate. Fusce tristique interdum scelerisque. 
      Donec vel laoreet nunc, in tristique risus. Phasellus ultrices orci mi, eget imperdiet libero ultrices quis. Phasellus iaculis, ante et dictum mollis, est ipsum feugiat turpis, condimentum sagittis ligula diam a erat. Donec porta, magna sit amet pellentesque pharetra, erat turpis semper lorem, ac varius metus arcu et felis. Vestibulum facilisis ac lorem ut blandit. 


      </div> 
     </div>

CSS

.popup { position:fixed;z-index:8;left:31%;width:625px;padding:0;top:70px;background:#fff;overflow:auto;display:none;box-shadow:5px 5px 10px 0 rgba(0,0,0,0.25)}

JQuery的

function opendialog(container) { 
$(container).fadeIn(); //open 
if($(container).height() < $(window).height()) { //centralize vertically 
    $(container).css({ 
     'top':'50%', 
     'margin-top':'-'+$(container).height()/2+'px' 
    }); 
} else { 
    $(container).css('position','absolute'); 
} 
$('.overlay').fadeIn(); 
} 

$('.cancel').click(function(){ //close clicking on overlay, close button and cancel button 
    $('body').css('overflow', 'auto'); 
    closedialog(); 
}) 
$('a').click(function(){ 
$('body').css('overflow', 'hidden');  
    opendialog('.popup'); 
})

来源

2016-08-19 userlkjsflkdsvm

如果你想身体滚动，只是删除线

$('body').css('overflow', 'hidden');

如果您希望模式本身在屏幕中向下移动，您需要添加一个外部div，占用整个页面并将overflow: scroll应用于该页面。

<div id="popup-outer"> 
    <div id="popup">[...]</div> 
</div>

来源

2016-08-19 19:39:52

已更新的答案。 –

以此为例 - http://codepen.io/anon/pen/xZBovY - 我希望滚动操作完全如此。然而，我的建筑完全不同，而不仅仅是香草JS。 – userlkjsflkdsvm

这样做的一个好方法是为顶部，底部，左侧和右侧设置固定值，删除宽度值。然后，您可以放心，您的模式始终居中并且屏幕尺寸最佳，当然，您不会将滚动条推到屏幕右侧。

.popup { 
    display: none; 
    position: fixed; 
    z-index: 8; 
    top: 70px; 
    bottom: 20px; 
    left: 20px; 
    right: 20px; 
    padding: 0; 
    background: #fff; 
    overflow: auto; 
    box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, 0.25) 
}

您也可以保持宽度固定，并设置利润率左缘和右自动提供所有的容器元素有某种宽度设置，使浏览器可以实际计算的利润率。

简单小提琴here。

来源

2016-08-19 19:51:31

模式打开时无法滚动。

回答

相关问题