Question

98

Disable scrolling while popup active

rated 0 times [ 99] [ 1] / answers: 1 / hits: 123353 / 11 Years ago, thu, october 31, 2013, 12:00:00

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:

I want to disable scroll of webpage while popup is active.

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>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

katieh

Add To Favorites

Follow

Total Points: 692

Total Questions: 104

Total Answers: 104

Location: Armenia

Member since Sat, Dec 31, 2022

1 Year ago

katieh questions

1 Uncaught TypeError: this.set is not a function in vue js

Sun, May 15, 22, 00:00, 2 Years ago

1 How to pass an icon as a prop?

Fri, Nov 26, 21, 00:00, 3 Years ago

1 React: hiding vs removing components

Wed, Sep 1, 21, 00:00, 3 Years ago

1 Error: Material-UI: The data grid component requires all rows to have a unique id property. A row was provided without id in the rows prop:

Tue, Apr 27, 21, 00:00, 3 Years ago

1 Set autocomplete off for Formik field

Wed, Oct 7, 20, 00:00, 4 Years ago

View All

answered 11 Years ago jamila · Accepted Answer

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