Hi All –
Looking for another set of eyes on this project.
I am trying to add a no-scroll function when a CMS modal is open.
Halfway there - I can get the scroll to stop on open but not the other way around.
I cannot get the no-scroll class to deactivate/remove on close.
Any help is greatly appreciated!
I have tried this method:
<script>
// when DOM is ready
document.addEventListener('DOMContentLoaded', () => {
// on .open-modal click
document.querySelectorAll('.open-modal').forEach(trigger => {
trigger.addEventListener('click', function(){
// on every click
document.querySelectorAll('body').forEach(target => target.classList.add('no-scroll'));
});
});
// on .close-modal click
document.querySelectorAll('.close-modal').forEach(trigger => {
trigger.addEventListener('click', function(){
// on every click
document.querySelectorAll('body').forEach(target => target.classList.remove('no-scroll'));
});
});
});
</script>
and this method:
<script>
Webflow.push(function() {
$('.modal-button').click(function(e) {
e.preventDefault();
$('body').css('overflow', 'hidden');
}); $('.close').click(function(e) {
e.preventDefault();
$('body').css('overflow', 'auto');
});
});
</script>
<script>
Webflow.push(function() {
$('.modal-bg').click(function(e) {
e.preventDefault();
$('body').css('overflow', 'auto');
});
});
</script>
