모달을 열 때 스크롤 할 수 없습니다.

Question

사용자가 모달에 대한 링크를 선택하면 본문 오버플로가 숨겨져 있지만 모달이 오버플로 : 자동 인 경우에도 모달에 대한 스크롤은 숨겨집니다. 나는 모달이 스크롤 오버레이 뒤에 무엇이없이 스크롤 할 수 있기를 바랍니다.

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.