Docs

[mertkahraman42]

Hi,

How could I disable page scrolling when my contact form 7 appears on a lightbox when a user clicks on the button that displays the lightbox. Also, scrolling should be enabled when lightbox is dismissed.

Thank you,

[mertkahraman42]

This reply has been marked as private.

[Paul R]

Hi,

Thanks for writing in! Regretfully this isn’t a feature offered by X. It could be possible with custom development, but this would be outside the scope of support we can offer. You may wish to consult a developer to assist you with this. X is quite extensible with child themes, so there are plenty of possibilities. Thanks for understanding. Take care!

[mertkahraman42]

Hi X,

I tried to do it. However, I got stuck. Here’s what I tried:

$( ".lightbox-button" ).click(function() {
  $('body').css('overflow', 'hidden');
  $('body').css('height', '100%');
});

Please, guide me a little bit!

[Nabeel A]

Hi again,

Instead of the jQuery Script you can do this with CSS, add the following code in your Customizer via Appearance > Customize > Custom > CSS:

#colorbox {
    position: fixed !important;
    top: 0 !important;
}

Let us know how this goes!

[mertkahraman42]

Hi,

I tried it, but I can still scroll the whole page when the lightbox is open. I would like to stop the scrolling on the whole page.

[Rue Nel]

Hello There,

Thanks for the updates!

Please try to use this custom js code in your customizer, Appearance > Customize > Custom > Javascript

(function($){
  $( ".lightbox-button" ).click(function() {
    $('html, body').css({'overflow': 'hidden', 'height': '100%'});
  });
})(jQuery);

Please let us know if this works out for you.

[mertkahraman42]

It works very weirdly.

There are 2 things:
When you open the lightbox for the first time, the page scrolls to top and when you close the lightbox, you go back to the place where you started.

In addition, page scroll stays disabled even after you close the lightbox.

[Lely]

Hello There,

The page scrolls to top when you open a lightbox because of disabling the scroll.
Please also add this. This will make the scroll back when you close the lightbox.

(function($){
  $( ".ilightbox-close" ).click(function() {
    $('html, body').removeAttr( 'style' );
  });
})(jQuery);

Further customizations from here would be getting into custom development, which is outside the scope of support we can offer. If you need more in depth changes, you may wish to consult with a developer. X is quite extensible with child themes, so there are plenty of possibilities. Thanks for understanding.

[Author]

Posts