How to prevent scroll behind pop up!

Publishing help General
5

Hi guys, this can be accomplished by setting the overflow property of the <html> tag.

Here’s a quick example showing how you might do this using custom code:

<script>

var $html = $(document.documentElement);
var $modal = $('.my-custom-modal');

function showModal() {
  $html.css('overflow', 'hidden');
  $modal.show().css('overflow', 'auto');
}

function hideModal() {
  $html.css('overflow', '');
  $modal.hide();
}

$('.modal-open-button').on('click', showModal);
$('.modal-close-button').on('click', hideModal);

</script>

Along with the above custom code, I would then create two buttons in Webflow and give them the classes:

“modal-open-button” and “modal-close-button”

Both buttons should have the following URL set in Link Settings

javascript:void(0);

Hope that helps!
-Dan

4 Likes