CODEWITHSUNDEEP
javascripthtmlcss
33528
33528

Reputation: 382

make page stop scrolling when lightbox is active

I have the following lightbox which includes a form. Everything works fine. My only problem is how to make the html page stop scrolling when the lightbox is active.

<a href = "javascript:void(0)" onclick="
  document.getElementById('light').style.display='block';
  document.getElementById('fade').style.display='block'">
<img src="img/add.jpg"/></a></p>
<div id="light" class="white_content">

<input name="degree_1" type="text" size="73"
   value="<?php echo $user_data_profile_education['degree_1'];?>"/>
</br></br>
Grade</br>
<input name="grade_1" type="text" size="73"
   value="<?php echo $user_data_profile_education['grade_1'];?>"/>

<a href = "javascript:void(0)" onclick="
  document.getElementById('light').style.display='none';
  document.getElementById('fade').style.display='none'"> 
</br><img src="img/done_editing.jpg"/> </a></div>
<div id="fade" class="black_overlay"></div>

and this is my css:

.black_overlay{
    display: none;
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 220%;
    background-color: grey;
    z-index:1001;
    -moz-opacity: 0.8;
    opacity:.80;
    filter: alpha(opacity=80);
}


.white_content {
    display: none;
    position: absolute;
    top: 45%;
    left: 30%;
    width: 32%;
    height: 51%;
    padding: 30px;
    padding-left:50px;
    border: 5px solid green;
    background-color: white;
    z-index:1002;
    overflow: auto;
}

Upvotes: 3

Views: 19226

Answers (4)

Sergey Cherenkov
Sergey Cherenkov

Reputation: 1

If somebody still needs it, you can use lightbox events:

let lg = document.getElementById('lightgallery');

lg.addEventListener('onAfterOpen', function(e) {
    $("html, body").css("overflow","hidden");
}, false);

lightGallery(lg);

lg.addEventListener('onCloseAfter', function(e) {
    $("html, body").css("overflow","auto");
}, false);

lightGallery(lg);

Upvotes: 0

Simran Malhotra
Simran Malhotra

Reputation: 3

Just add this script to disable scrollign in lighbox 

<script>
        lightbox.option({
    disableScrolling:true
    })
</script>

Upvotes: -2

user3152459
user3152459

Reputation: 403

Use onLoad/onClose to change the css of the div that holds the page content

Setting .lb_overlay height is a nice touch, add the same "margin" from the top of the modal to the bottom so scrolling to the bottom doesn't just sit right at the bottom of the window

var modal = $("#modal"),
    wrapper = $("#wrapper")

$("#modalTrigger").click(function(){
    modal.lightbox_me({
        centered: true,
        onLoad : function(){
            wrapper.css({
                "position" : "fixed",
                "width" : "100%"
            })
            $(".lb_overlay").css("height" , parseInt($(window).height()) + parseInt(modal.css("top") ) + "px" )
        },
        onClose : function(){
            wrapper.css("position" , "relative")
        }
    })
})

Upvotes: 0

Kaloyan
Kaloyan

Reputation: 7352

Add overflow: hidden to your body when you show the lightbox and overflow: auto when you hide it.

Upvotes: 19

Related Questions