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?
Related
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.
We have html page with a pop up that gets opened on button click. Both html page and pop up have scroll bar for them.
I want pop up window to scroll down on click of a button that is inside the pop up.
I am doing:
$(window).scrollTop($('#suggestDetails').offset().top);
The element #suggestDetails is inside the pop up but the main html page scroll bar gets down on button click and not the pop up scroll bar.
Any idea how to move down scroll bar/screen inside the pop up?
You need to scroll the popup/modal, not the window.
$('#yourmodal-id').scrollTop($('#suggestDetails').offset().top);
I have a app where there is list which loading by scroll, and I have modal window, when I open window I still can load list, but this is error. How can I disable scroll in parent window (body) ? I know about overflow: hidden for body, but maybe there is special option in Ext.window.Window in order to disable scroll.
Thanks.
I think you will have same issue with all ui controls under modal dialog. You can add transparent div to feel all background and display modal dialog in front of this div. In this case all ui controls in the back of dialog will not be accessible for user.
When initialising your Ext.window.Window you can add param modal: true which will add an overlay to the background which may prevent user scrolling. Otherwise it will be a manual process of setting overflow:hidden on the body when your window is shown.
Source: http://docs.sencha.com/extjs/5.0/apidocs/#!/api/Ext.window.Window
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.
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/