How to Disable Background Scrolling When Popup Modal Is Open

0 333

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.

Leave A Reply

Your email address will not be published.