Prevent Backgroud Scrolling When Popup Is Open - scrollable-overlay

scrollable-overlay is a jQuery plugin that prevents body (background content actually) from scrolling when a modal popup is open, while keeping the popup content scrollable.

Supports both desktop and mobile devices (iOS and Android).

How to use it:

1. Include the main JavaScript file index.js after jQuery JavaScript library.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous"></script>
<script src="index.js"></script>

2. Create a button to toggle your modal window.

<button id="btn">OPEN MODAL</button>

<div id="overlay" class="overlay hidden">
  <div id="close">CLOSE</div>
  Modal Content here
</div>

3. Activate the modal window and disable body scrolling when the 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')
})

---

This awesome jQuery plugin is developed by ulivz. For more Advanced Usages, please check the demo page or visit the official website.