29

I created a jQuery popup by following an online tutorial (http://uposonghar.com/popup.html).

Due to my low knowledge on jQuery I am not able to make it work as of my requirements.

My problem:

  1. I want to disable scroll of webpage while popup is active.
  2. Background fade color of popup while active is not working on full webpage.

CSS:

body {
    background: #999;
}
#ac-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,.6);
    z-index: 1001;
}
#popup{
    width: 555px;
    height: 375px;
    background: #FFFFFF;
    border: 5px solid #000;
    border-radius: 25px;
    -moz-border-radius: 25px;
    -webkit-border-radius: 25px;
    box-shadow: #64686e 0px 0px 3px 3px;
    -moz-box-shadow: #64686e 0px 0px 3px 3px;
    -webkit-box-shadow: #64686e 0px 0px 3px 3px;
    position: relative;
    top: 150px; left: 375px;
}

JavaScript:

<script type="text/javascript">
function PopUp(){
    document.getElementById('ac-wrapper').style.display="none";
}
</script>

HTML:

<div id="ac-wrapper">
  <div id="popup">
  <center>
    <p>Popup Content Here</p>
    <input type="submit" name="submit" value="Submit" onClick="PopUp()" />
  </center>
  </div>
</div>

<p>Page Content Here</p>

10 Answers 10

23

A simple answer, which you could use and would not require you to stop the scroll event would be to set the position of your #ac-wrapper fixed.

e.g.

#ac-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,.6);
    z-index: 1001;
}

this will keep the container of the popup always visible (aligned top - left) but would still allow scrolling.

But scrolling the page with a popup open is BAD!!! (almost always anyway)

Reason you would not want to allow scrolling though is because if your popup isn't fullscreen or is semi transparent, users will see the content scroll behind the popup. In addition to that, when they close the popup they will now be in a different position on the page.

A solution is that, when you bind a click event in javascript to display this popup, to also add a class to the body with essentially these rules:

.my-body-noscroll-class {
    overflow: hidden;
}

Then, when closing the popup by triggering some action or dismissing it with a click, you simply remove the class again, allowing scroll after the popup has closed.

If the user then scrolls while the popup is open, the document will not scroll. When the user closes the popup, scrolling will become available again and the user can continue where they left off :)

4
  • in modern chromium browsers, applying overflow: hidden to <body> removes vertical scrollbar and the whole page jumps is redrawn filling the newly created spaces :/
    – sKopheK
    Mar 28, 2021 at 13:28
  • @sKopheK yep, unfortunately there is no proper way to prevent this from happening, well, maybe you can play around a bit with using vw units instead of percentage width for your page layout, but then the scrollbar might appear on top of any content on the right side. If your popup has kind of a semi-transparent dark backdrop it usually won't be noticed though. Also, when you are watching a YT video and expand the sidebar using the hamburger menu, this is exactly how it's done :)
    – SidOfc
    Mar 31, 2021 at 18:20
  • Define "proper." From what I gather with my solution the page doesn't jump.
    – x-yuri
    Mar 11 at 10:11
  • @x-yuri that's great, thanks for sharing. As for what I meant by "proper", in this context I intended it to be read as "without side effects".
    – SidOfc
    Mar 13 at 0:22
21

To disable scrollbar:

$('body').css('overflow', 'hidden');

This will hide the scrollbar

Background-fade-thing:

I created my own popup-dialog-widget that has a background too. I used the following CSS:

div.modal{
    position: fixed;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9998;
    background-color: #000;
    display: none;
    filter: alpha(opacity=25); /* internet explorer */
    -khtml-opacity: 0.25; /* khtml, old safari */
    -moz-opacity: 0.25; /* mozilla, netscape */
    opacity: 0.25; /* fx, safari, opera */
}
2
  • 2
    this solution is not working if the position of the scroll is way down the page... what it would do... when modal is open... it would set the full width and height from top:0;... so when you'd close the modal... your page would be on top again, and not where you left! Mar 29, 2017 at 15:54
  • This worked for me. However I needed to add the class to my html element, not on body. Moreover, it works on iOS but with a flaw. Once focused the form that is inside my pop up the class does not work any longer. Weird.
    – Garavani
    Jan 22, 2022 at 11:27
6

I had a similar problem; wanting to disable vertical scrolling while a "popup" div was displayed.

Changing the overflow property of the body does work, but also mess with the document's width.

I opted jquery to solve this using and used a placeholder for the scrollbar. This was done without binding to the scroll event, ergo this doesn't change your scrollbar position or cause flickering :)

HTML:

<div id="scrollPlaceHolder"></div>

CSS:

body,html
{
    height:100%; /*otherwise won't work*/
}
#scrollPlaceHolder
{
    height:100%;
    width:0px;
    float:right;
    display: inline;
    top:0;
    right: 0;
    position: fixed;
    background-color: #eee;
    z-index: 100;
}

Jquery:

function DisableScrollbar()
{
    // exit if page can't scroll
    if($(document).height() ==  $('body').height()) return;

    var old_width = $(document).width();
    var new_width = old_width;

    // ID's \ class to change
    var items_to_change = "#Banner, #Footer, #Content";

    $('body').css('overflow-y','hidden');

    // get new width
    new_width = $(document).width()

    // update width of items to their old one(one with the scrollbar visible)
    $(items_to_change).width(old_width);

    // make the placeholder the same width the scrollbar was
    $("#ScrollbarPlaceholder").show().width(new_width-old_width);

    // and float the items to the other side.
    $(items_to_change).css("float", "left");

}

function EnableScrollbar()
{
    // exit if page can't scroll
    if ($(document).height() ==  $('body').height()) return;   

    // remove the placeholder, then bring back the scrollbar
    $("#ScrollbarPlaceholder").fadeOut(function(){          
        $('body').css('overflow-y','auto');
    });
}

Hope this helps.

2
  • this solution is not working if the position of the scroll is way down the page... what it would do... when modal is open... it would set the full width and height from top:0;... so when you'd close the modal... your page would be on top again, and not where you left! Mar 29, 2017 at 15:55
  • I like this attempt at preventing layout shift, however, different browsers and operating systems use different widths / colors and in case of macOS, the scrollbar is overlaid and invisible when inactive (so you only see it while scrolling). You've solved the issue in one browser or perhaps all browsers on one OS, but it's not universal :)
    – SidOfc
    Jun 25, 2021 at 11:55
4

If simple switching of body's 'overflow-y' is breaking your page's scroll position, try to use these 2 functions (jQuery):

// Run this function when you open your popup:
var disableBodyScroll = function(){
    window.body_scroll_pos = $(window).scrollTop(); // write page scroll position in a global variable
    $('body').css('overflow-y','hidden');
}

// Run this function when you close your popup:
var enableBodyScroll = function(){
    $('body').css('overflow-y','scroll');
    $(window).scrollTop(window.body_scroll_pos); // restore page scroll position from the global variable
}
3

Use below code for disabling and enabling scroll bar.

 Scroll = (
    function(){
          var x,y;
         function hndlr(){
            window.scrollTo(x,y);
            //return;
          }  
          return {

               disable : function(x1,y1){
                    x = x1;
                    y = y1;
                   if(window.addEventListener){
                       window.addEventListener("scroll",hndlr);
                   } 
                   else{
                        window.attachEvent("onscroll", hndlr);
                   }     

               },
               enable: function(){
                      if(window.removeEventListener){
                         window.removeEventListener("scroll",hndlr);
                      }
                      else{
                        window.detachEvent("onscroll", hndlr);
                      }
               } 

          }
    })();
 //for disabled scroll bar.
Scroll.disable(0,document.body.scrollTop);
//for enabled scroll bar.
Scroll.enable();
1

https://jsfiddle.net/satishdodia/L9vfhdwq/1/
html:- Open popup

Popup

pop open scroll stop now...when i will click on close automatically scroll running.

close

**css:-**    
        #popup{
        position: fixed;
        background: rgba(0,0,0,.8);
        display: none;
        top: 20px;
        left: 50px;
        width: 300px;
        height: 200px;
        border: 1px solid #000;
        border-radius: 5px;
        padding: 5px;
        color: #fff;
    } 
**jquery**:-
       <script type="text/javascript">
        $("#open_popup").click(function(){
        $("#popup").css("display", "block");
        $('body').css('overflow', 'hidden');
      });

      $("#close_popup").click(function(){
        $("#popup").css("display", "none");
        $('body').css('overflow', 'scroll');
      }); 
      </script>
1
  • Perfect. Was looking exactly for this.. Just simple JS. Thanks :)
    – Marc
    Sep 4, 2020 at 8:12
0

I had the same problem and found a way to get rid of it, you just have to stop the propagation on touchmove on your element that pops up. For me, it was fullscreen menu that appeared on the screen and you couldn't scroll, now you can.

$(document).on("touchmove","#menu-left-toggle",function(e){
    e.stopPropagation();
});
0

This solution works for me.

HTML:

<div id="payu-modal" class="modal-payu">

      <!-- Modal content -->
      <div class="modal-content">
        <span class="close">&times;</span>
        <p>Some text in the Modal..</p>
      </div>

    </div>

CSS:

.modal-payu {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  bottom: 0;


  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

/* The Close Button */
.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

JS:

<script>
      var btn = document.getElementById("button_1");
      btn.onclick = function() {
        modal.style.display = "block";
        $('html').css('overflow', 'hidden');
      }

    var span = document.getElementsByClassName("close")[0];
    var modal = document.getElementById('payu-modal');

    window.onclick = function(event) {
      if (event.target != modal) {
      }else{
        modal.style.display = "none";
        $('html').css('overflow', 'scroll');
      }
    }

    span.onclick = function() {
      modal.style.display = "none";
      $('html').css('overflow', 'scroll');
    }

    </script>
0



I ran into the problem and tried several solutions, here is the article that solved my problem (https://css-tricks.com/prevent-page-scrolling-when-a-modal-is-open/) and it is quite simple!

It uses the 'fixed body' solution, which is quite common to find in lots of posts. The problem with this solution is, when the popup is closed, the body will scroll back to the top. But the article points out: by manipulating the CSS top and position attributes while using the solution, we can recover the scroll position.

Another issue of the solution is, you can't apply the solution with the multiple popup scenario. So I added a variable to store the count of the popup, just to make sure the program won't trigger the initiating process nor the reset process at the wrong timing.

Here is the final solution I get:

// freeze or free the scrolling of the body:

const objectCountRef = { current: 0 }

function freezeBodyScroll () {
  if (objectCountRef.current === 0) {  // trigger the init process when there is no other popup exist
    document.body.style.top = `-${window.scrollY}px`
    document.body.style.position = 'fixed'
  }
  objectCountRef.current += 1
}
function freeBodyScroll () {
  objectCountRef.current -= 1
  if (objectCountRef.current === 0) {  // trigger the reset process when all the popup are closed
    const scrollY = document.body.style.top
    document.body.style.position = ''
    document.body.style.top = ''
    window.scrollTo(0, parseInt(scrollY || '0') * -1)
  }
}

You can also see the demo on my Codepen: https://codepen.io/tabsteveyang/pen/WNpbvyb

Edit


More about the 'fixed body' solution

The approach is mainly about setting the CSS position attribute of the body element into 'fixed' to make it unscrollable. No matter how far it has been scrolled, when the body is fixed, it will scroll back to the top, which is the behavior that I don't expect to see. (Imagine the user is browsing a long content and almost scrolls to the bottom of the page, suddenly a popup shows up and make the page scroll right back to the top, that's a bad user experience)

The solution from the article

Base on the 'fixed body' approach, additionally, the solution sets the CSS top of the body as the value of '-window.scrollY px' to make the body looks like it stays in the current scrolling position while it is fixed. Furthermore, the solution uses the CSS top of the body as a temporary reference, so that we can retrieve the scrolling position by the attribute when we want to make the body scrollable again. (Notice you have to multiple the position you get to -1 to make it positive)

1
  • Please provide an explanation of your answer so that the next user knows why this solution worked for you. Also, sum up your answer in case the link stops working in the future.
    – Elydasian
    Jul 21, 2021 at 8:39
0

I did this and it worked easy:

function openModal() {
    var body = document.getElementsByTagName('body')[0];
    body.style.overflow = 'hidden'; // Verwijder scrollen
}

function closeModal() {
    var body = document.getElementsByTagName('body')[0];
    body.style.overflow = ''; // Herstel standaard scrollgedrag
}
New contributor
Nick is a new contributor to this site. Take care in asking for clarification, commenting, and answering. Check out our Code of Conduct.
1
  • Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.
    – Community Bot
    15 hours ago

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.