Adding Custom Code

You probably know what you're doing, but if you're new to Webflow and need some assistance, I’ve put together an in-depth, step-by-step guide to help you get this modal popup working perfectly. Follow it to ensure everything runs smoothly, with no glitchy background movement when scrolling within the modal popup.

‍

Step 1

First step is to copy the code below.

<script>

$('[scroll=enable]').click(function() {
	unLockScroll();
});

$('[scroll=disable]').click(function() {
	lockScroll();
});


let scrollPosition = [];
let marginB;
let marginR;
const $html = $('html');
const $body = $('body');

function lockScroll(){
  setTimeout(function () {
    let initWidth = $body.outerWidth();
    let initHeight = $body.outerHeight();
    scrollPosition = [
        self.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft,
        self.pageYOffset || document.documentElement.scrollTop  || document.body.scrollTop
    ];
    $html.css('overflow', 'hidden');
    window.scrollTo(scrollPosition[0], scrollPosition[1]);

    marginR = $body.outerWidth()-initWidth;
    marginB = $body.outerHeight()-initHeight;
    $body.css({'margin-right': marginR,'margin-bottom': marginB});
  }, 10);
}

function unLockScroll(){
  setTimeout(function () {
    $html.css('overflow', 'initial');
    window.scrollTo(scrollPosition[0], scrollPosition[1]);
    $body.css({'margin-right': 0, 'margin-bottom': 0});
  }, 10);
}

</script>

Step 2

Second step is to paste the code on the page your slider is located (for this project the slider is located on the home page, so the custom code is placed on this page under the home page settings).

To navigate to the page settings click the symbol shown below. This symbol can be found on the top left hand side of the Webflow Interface.

Step 3

Third step is to click the page settings cog symbol shown below.

Step 4

Fourth step is to scroll down to the custom code section and paste the custom code in the "Before </body> tag" section.

How (Un)locking the page behind the popup works

‍

To Disable Scrolling (Lock the Page)

On elements that should lock the page and disable scrolling when clicked (e.g. the button to open the popup), add the following custom attribute in the element settings: scroll="disable"

To Enable Scrolling (Unlock the Page)

On elements that should unlock the page and enable scrolling when clicked (e.g. the exit icon/clickable background), add the following custom attribute the element settings: scroll="enable"

How the interactions work to open the popup modal

For each new modal popup you want to create, you'll need to add a new modal popup layer and link it to a corresponding interaction that triggers the modal to open. (The first three have already been set up for you.)

‍

And that's everything.

If you found this useful and are using it in a project and you'd like to buy me a coffee, my donation link is below.

Thank you,

- Vaughan