How to Disable Background Scrolling When Popup Modal Is Open

by Posted on

How to Disable Background Scrolling When Popup Modal Is Open
Do you want to prevent background scrolling when popup modal is open then in this post I am going to share simple lightweight plugin which disable background scrolling when ever popup will display on page. scrollable-overlay is a jQuery plugin that prevents html body from scrolling when a modal popup is open, while keeping the popup content scrollable.

Libraries

Include plugins libraries on page with latest jQuery library.

<script src="//code.jquery.com/jquery-latest.min.js"></script>
<script src="index.js"></script>

HTML

Added sample popup button with dummy content.

<button id="btn">OPEN POPUP</button>
<div id="overlay" class="overlay hidden">
  <div id="close">CLOSE</div>
  POPUP CONTENT GOES HERE
</div>



JS

Activate the popup window and disable body scrolling when the popup modal window is open.

const button = $('#btn')
const overlay = $('#overlay')
overlay.scrollableOverlay()
 
const close = $('#close')
const body = $('body')
button.on('click', () => {
  overlay.removeClass('hidden');
  overlay.trigger('show')
})
 
close.on('click', () => {
  overlay.addClass('hidden');
  overlay.trigger('hide')
})

See live demo and download source code.

DEMO | DOWNLOAD

Visit official github repository for more information and follow for future updates. Don’t forget to read license for using this plugin in your projects.


Published by admin