라이트 박스를 스크롤하지 못하게하려면 어떻게해야합니까?

http://www.markthatred.com/ 제 작품 섹션으로 가서 축소판을 클릭하면이 사이트가 있습니다. 라이트 박스는 정상적으로 작동하지만 라이트 박스에있는 동안 스크롤 할 수 없게 만들 수있는 방법은 무엇입니까?라이트 박스를 스크롤하지 못하게하려면 어떻게해야합니까?

HTML 당신은 단순히 한 라이트가 활성화되어있는 한, HTML 요소에 overflow: hidden을 추가 할 수

.lightbox { 
    /** Default lightbox to hidden */ 
     display: none; 

    /** Position and style */ 
     position: fixed; 
     z-index: 999; 
     width: 100%; 
     height: 100%; 
    text-align: center; 
      top: 0; 
      left: 0; 
    background: rgba(0,0,0,0.8); 
} 

.lightbox img { 
    /** Pad the lightbox image */ 
    max-width: 95%; 
    max-height: 90%; 
    margin-top: 2%; 
} 

.lightbox img:hover { 
    opacity: 1; 
} 

.lightbox:target { 
    /** Remove default browser outline */ 
    outline: none; 

    /** Unhide lightbox **/ 
    display: block; 
    overflow: hidden; 
}

출처

2016-06-03 Mark Anthony

이 스크립트를 추가하면 작동합니다.

$(document).ready(function(){ 
    $(".works-feature").click(function(){ 
     $("body").css("overflow","hidden"); 
    }); 
    $(".lightbox").click(function(){ 
     $("body").css("overflow","auto"); 
    }); 
});

출처

2016-06-03 12:27:51 Mani

완벽하게 작동합니다! 감사! –

환영합니다 .... 멋진 디자인 – Mani

@ user2993018 - 라이트 박스가 클릭에 의해 트리거되고 닫히는 경우에만. – MattDiMu

<!-- thumbnail image wrapped in a link --> 
<a href="#img1"> 
    <img alt="Eiffel Tower Web Design Mockup - Mark That RedWeb Design Mockup" class="works-feature-thumb" src="images/lightbox-1-t.jpg"/> 
</a> 
<!-- lightbox container hidden with CSS --> 
<a href="#_" class="lightbox" id="img1"> 
    <img alt="Law Attorney Web Design Mockup - Mark That Red Web Design Mockup Philippines" src="images/lightbox-1.jpg"/> 
</a>

CSS. 어떤 라이트 박스를 사용하고 있는지 알 수는 없지만 "onOpen"과 "onClose"같은 콜백이있을 수 있습니다 :

출처

2016-06-03 11:59:31 MattDiMu

안녕하세요. 라이트 박스는 순수한 CSS이며 유일한 코드입니다. –

자바 스크립트를 통해 라이트 박스를 트리거하는 것이 좋습니다. Smth는 다음과 같이 : $ (". works-feature"). on ('click', function() {$ this this.addClass ("show-lightbox"); ","hidden ");});'라이트 박스를 클릭하면 클래스를 다시 제거합니다. 그렇지 않으면 스크롤이 안정적으로 작동하지 않습니다. – MattDiMu

라이트 박스를 스크롤하지 못하게하려면 어떻게해야합니까?

답변

관련 문제