2

I'm using jquery tools overlay and it's great. However, the scrolling behavior is a little strange. If you open an overlay and put your mouse over it, you can still scroll the page behind it if you're at the top/bottom of the overlay.

Is there a way (preferably a jquery tools built in way) to prevent the page BEHIND the overlay from scrolling?

Dty
  • 12,031
  • 4
  • 40
  • 60

4 Answers4

7

Not used jquery tools but when showing a ui dialog it is common to do the following to prevent the screen scrolling.

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

You could also add an event to the window scroll to prevent scrolling as this SO answer describes and also this article

Community
  • 1
  • 1
redsquare
  • 75,782
  • 18
  • 147
  • 156
  • 1
    This toggles the scrollbar which makes the page shift a little but it's acceptable. – Dty Jul 11 '11 at 02:23
  • @Dty sure but the other option is to hook up a handler to the window scroll event and when fired return to the original position. Hiding the scrollbar is the lesser of two evils I think! – redsquare Jul 11 '11 at 05:53
4

Here you go:

$(function() {
        $("#element").overlay({
            mask: {
            color: '#000',
            loadSpeed: 200,
            opacity: 0.7
        },
        closeOnClick: true,
        onLoad: function () {
            $("body").css("overflow", "hidden");
        },
        onClose: function () {
            $("body").css("overflow", "");
        }
    });
});
cl0udc0ntr0l
  • 139
  • 1
  • 13
0

Just had a look at this. You can't prevent the underlying page from scrolling, but you can prevent your OVERLAY from scrolling with it... after all that's what needs to be in focus right?

Try setting the CSS @media screen for your overlayed div as fixed .

T9b
  • 2,576
  • 4
  • 26
  • 45
  • I believe the default behavior (other than IE) is for the overlay to stay fixed. And it's actually the page BEHIND it that I don't want scrolling. If it does it will cause my users to be confused. – Dty Jun 08 '11 at 10:46
  • Actually thinking about that you could apply the fixed CSS temporarily to you background page when the overlay is visible and remove it when you close. As you are using Jquery you can do this by creating a class with the fixed parameter on your body, then use `.addClass()` to apply it and `.removeClass()`. – T9b Jun 08 '11 at 13:44
  • Thank you for this but it shifts stuff around on the page. @redsquare solution is a bit cleaner so I went with that. – Dty Jul 11 '11 at 02:24
0
.modal {
    //your other settings
    position:absolute !important;
}

Add this to the css to fix the modal window to the background. Should the modal window be larger than the screen, the whole page would of course be scrolled (including the modal window and the background).

FThompson
  • 27,043
  • 11
  • 53
  • 89
Hannes Schmidt
  • 27
  • 4