2016-06-03 2 views
0

http://www.markthatred.com/ У меня есть этот сайт, когда вы переходите в раздел моих работ и щелкаете эскиз, лайтбокс будет казаться, что он отлично работает, но как я могу сделать его не прокручиваемым, когда он включен в лайтбокс?Как сделать свой лайтбокс не прокруткой?

HTML

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

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

ответ

1

Если вы добавите этот скрипт, он будет работать.

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

Работает отлично! Благодаря! –

+0

приветствуется .... славный дизайн – Mani

+0

@ user2993018 - только если лайтбокс запущен и закрыт щелчками. – MattDiMu

1

Вы можете просто добавить overflow: hidden к HTML-элементу, пока Lightbox активен. Я не знаю, какой лайтбокс вы используете, но, вероятно, есть некоторые обратные вызовы, такие как «onOpen» и «onClose»:

+0

Привет, лайтбоксы, которые я получил, являются чистыми css, и это единственный код. –

+0

Я вижу - тогда я бы рекомендовал вам запустить лайтбокс через JavaScript. См. Так: '$ (". Works-feature "). On ('click', function() {$ (this) .addClass (" show-lightbox "); $ (" body "). Css (" overflow "," hidden ");});' и снова удалите класс при нажатии на лайтбокс. В противном случае прокрутка не будет работать надежно. – MattDiMu