How to Disable Background Scrolling When Popup Modal Is Open

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.


3 Replies to “How to Disable Background Scrolling When Popup Modal Is Open”

  1. i want a slider
    partially nearby near by images visible

    the slider should be full width
    there are 3 images wull be visible
    lest and right images opacity is .5 and middle image is a active image and also middle image will be scale 1.3

  2. will u please tell me how to upload multiple images with image preview and ‘remove image’ option

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.