How do I stop scrolling when a modal window is opened
I call the modal window in so many places that the window is calling some other function. At the time the modal window appears the page scrolls creates a problem going up.
I want to fix the position of scrolling when modal window is called or any modal window function is called.
So basically I wrote one scroll event to control the scrolling but it is going up only. I want to be fixed the position of scroll bar in same when its called the modal window.
document.body.scrollTop = 0;
Check if your modal adds any class to body element. If so, just apply overflow: hidden to this class. Else, when opening modal, add some class to body element manually and apply same overflow.
Related
I am using react-native-modal which only takes up part of the screen at the bottom I need to be able to scroll content outside of the modal. But all my clicks are on the backdrop of the modal window. Is there a way to do this?
I am building a web widget that opens a modal window. The window opens as expected when the trigger link is at the top of the page. But when the trigger is at the bottom of a long page (that requires scrolling), the modal window is clipped/truncated above the viewing area.
Regardless of where the modal window is triggered, the HTML is appended to the body of the page, so I don't understand what's causing the issue.
I would appreciate some help.
js code: https://textfilter.me/widget.js
example / demo : https://textfilter.me/privacy/
It's not javascript. It's css. In this case change position:absolute to position: fixed in modal class. voila.
When modal window is opened I want browser's scrollbar to be attached to this modal window so that scrolling will scroll down the modal window and initial page will remain locked. I have seen this in getglue.com. Here are screen shots attached or you can visit the site too.
Original
Modal window is open now
As you can see the default scroll bar is now binded to modal window and page at background is locked.
How this can be achieved ? I am using jqmodal plugin (if it helps).
The effect is achieved by setting appropriate values for the CSS-property overflow-y on the the overlay and its container (see for example this MDN-article).
Here's an example of how to achieve something similar: http://jsfiddle.net/ZwXdD/
I have a modal dialog (jquery.dialog) that opens up when a user clicks on a link. I want to hide the scroll bar on the page behind the dialog, so user will not be able to use it. This works perfectly fine with the overflow:hidden except older IE browsers that mess the entire page up when doing that.
So I came up with this to make it work in the IE: I created a div that was covering the entire content of the page and set it to position:relative and width/height:100%. Then anytime, the modal dialog opens up, the position gets set to fixed. That makes the overwflow:hidden work in old IE.
Now, the other problem came up. When the user is at the bottom of the page and clicks on the links, dialog pops up, but the main page jumps up to the top.
I want the main page to stay intact if possible. How can I do so?
Thank you.
The code to show/close the dialog:
show:
$('#allContent').css({ position: "fixed" });
$('#viewJobPanel').dialog('open');
$('#allContent').css('overflow', 'hidden');
close:
$('#allContent').css('overflow', 'visible');
$('#allContent').css({ position: "relative" });
$('#viewJobPanel').dialog('destroy');
and when user clicks on the link, I have this event handlers
e.preventDefault();
e.stopPropagation();
Use a span bound to a click event instead of an anchor element to avoid the default behavior of repositioning the top of the window.
I have a dialog(with scrollable content body) on top of a page that's also scrollable. Now I want that when I try to scroll, from inside the dialog using mouse wheel, only the dialog body should scroll and not the page below it.
How do I do that ?
You could try wrapping all your content into a block with overflow: auto and set the overflow property of the window to hidden.
See example here.
I don't think you can prevent the window from scrolling otherwise. See similar question: prevent Scroll "bubbling" from element to window.
Another answer suggests you can prevent the mouse-wheel event's default effect: Prevent scrolling of parent element?. But it's not ideal as scrolling also occurs upon pressing keys, selecting text and so on.