Невозможно прокручивать, когда модален открыт.

Question

Когда пользователь выбирает ссылку для модального, переполнение тела скрыто, но прокрутка для модала также скрыта, даже когда у меня модальный как переполнение: 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'); 
}) 

Answer 1

Если вы хотите, чтобы тело, чтобы прокрутить, просто удалить строку

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

Если вы хотите, чтобы сам модал перемещался по экрану, вам нужно добавить внешний div, который занимает всю страницу и применить к нему overflow: scroll.

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

Answer 2

Один из хороших способов сделать это - установить фиксированные значения для верхнего, нижнего, левого и правого, удалив значение для ширины. Тогда вы можете быть уверены, что ваш модальный центр всегда имеет центр и оптимальный размер для экрана, и, конечно же, вы не будете задвигать свою полосу прокрутки с экрана вправо.

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