Disable scrolling while popup active

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 */
}

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 :)