It works really fine, on all browsers and mobile, but in this example, two buttons are used to open and then close the modal. But I only have one. On mobile it works, but not on desktop. When I open the modal, I can not scroll (this is what I want) but when I close it, I want to be able to scroll again (and this does not work). Someone already asked for creating this and the answer was adding “.w–open” which Webflow creates for the second trigger. I tried it and it does not work, neither when I put the code on the page or in custom code in the settings.
You’ve already created the second button and styled it red with a class of close so use this. All you then need to do is replace the class name in the code and it will work.
The second trigger is currently looking for .open .w--open and it can’t find it, therefore the ('overflow', 'auto') is not being fired which is why you cannot scroll when it’s closing.
<script>
// Prevents body scroll on desktop only
Webflow.push(function() {
$('.open').click(function(e) {
e.preventDefault();
$('body').css('overflow', 'hidden');
});
// ADD THE .close CLASS BELOW TO MAKE IT WORK
$('.close').click(function(e) {
e.preventDefault();
$('body').css('overflow', 'auto');
});
});
</script>
See the video below for the changes to the interaction you’ll need.
First of all thanks for your quick reply! Well sadly, you modified it to use with a second button, which is the state, that the Webflow project was in the beginning. This is why there was already a class and an interaction. I cloned it from the link I posted. But I need it to run with only one button, which opens and closes the modal on a second click. And this script is sadly not (yet) working with one button only. When I have two everything is fine, exactly as you did it. Do you know the solution, for only using one button?
I am so sorry, I might have not made myself clear enough what I want to achieve. I am really thankful and also sorry that you took your time to help me out.
Definitely no need to be sorry. I may not have the answer you need right now, but I’ll help if I can.
If I can ask what is the use case that you need only one button instead of using two?
It is for my portfolio site, on which I use a hamburger menu button.
You can see it here: https://portfolio-testumgebung.webflow.io
Name/Content and Website is still in progress
For a scrollable content you have to go there to “About” or the other pages.
So here’s a way to do it with just javascript instead of jQuery (which I don’t understand, at all).
First of all, do these steps:
Temporarily remove the body class from the body
Add a new class called no-overflow
Give height of 100% and overflow: hidden to the no-overflow class.
Remove the no-overflow class (don’t delete it) then add the body class back again.
This just makes no-overflow available to toggle as a class.
What is happening in the code below is that as you click the open button, the no-overflow class you created is being toggled on the body.
The code is shorter, and if jQuery is updated in the future, then nothing should break.
<script>
// Prevents body scroll on desktop only
var openModal = document.getElementById('open');
var body = document.querySelector('body');
openModal.addEventListener('click', function() {
body.classList.toggle('no-overflow')
});
</script>
Please note that some older browsers may not support classList so worth checking a few of the main up to date ones, particularly Internet Explorer.
Your site is awesome by the way!!! Let me know how you get on!
You solved it! I can’t believe it! 5 hours I was searching for a solution but nothing worked and now your suggestion just does exactly what I needed! And it is so simple to do! Thank you very very much!
I hope other people with the same problem get to this topic here. Thank you for your time and help! And also for your compliment about my site. I will let you know when it is online, which will be in about 2 weeks.
Flo
For others in summary:
Clone the project from the link in my first post, then go through the steps from magic mark and replace the first script for desktop (from the cloned project) with the awesome one from magicmark, that’s it!
Woohoo! So happy it’s worked the way you want it to, yeah it was a lot simpler than I thought too!
My first solution was going to be to add an “invisible div” to act as the second button over your menu button when it’s clicked, which would have worked, but been a bit messy/hacky.
Please do let me know, I will share it with our team for sure and I look forward to seeing it.
I am always amazed when someone finds a solution as fast as you did!
I thought about that messy way, too, because this was something, I could have done by myself without scripting But as you said, it would be not the cleanest way Your way is working perfect.
When the site is online, I will will message you. Right now I am filling it with content, and it is super easy, because I built everything with CMS
Hi! I was wondering if anyone could help with an issue I’m having.
I have a form modal that is within a collection list. On my site when you click the first button that reveals the first form, the no scrolling function works (specifically for mobile), however when selecting any form after that, the scrolling prevention code doesn’t work.
If anyone has any ideas, it would be greatly appreciated.
Let me know how you get on!
