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.
Related
Edit - Is there any way to click outside of a modal window if there is an iframe present? I think that could be a solution. Is there a way to click on any point of a browser window without having to target a specific element while doing it? I noticed that if you click outside of the modal box, the modal disappears.
I am working on backtesting a modal popup window and I am having issues with selecting and closing the modal popup window.
It seems the DOM is not traversable (when you select the button with chrome inspector and try to trigger an action, any action I try to trigger doesn't seem to work because the element is null, however it is present and I am able to select it).
See iframe here -
https://servedby.flashtalking.com/container/18442;121244;12954;iframe/?ftXRef=[%INSERT_TRANSACTION_ID_HERE%]&ftXValue=[%INSERT_TRANSACTION_VALUE_HERE%]&ftXType=[%INSERT_TRANSACTION_TYPE_HERE%]&ftXName=[%INSERT_TRANSACTION_NAME_HERE%]&ftXNumItems=[%INSERT_TRANSACTION_QUANTITY_HERE%]&ftXCurrency=[%INSERT_TRANSACTION_CURRENCY_HERE%]&U1=[%INSERT_U1_HERE%]&U2=[%INSERT_U2_HERE%]&U3=[%INSERT_U3_HERE%]&U4=[%INSERT_U4_HERE%]&U5=[%INSERT_U5_HERE%]&U6=[%INSERT_U6_HERE%]&U7=[%INSERT_U7_HERE%]&U8=[%INSERT_U8_HERE%]&U9=[%INSERT_U9_HERE%]&U10=[%INSERT_U10_HERE%]&U11=[%INSERT_U11_HERE%]&U12=[%INSERT_U12_HERE%]&U13=[%INSERT_U13_HERE%]&U14=[%INSERT_U14_HERE%]&U15=[%INSERT_U15_HERE%]&U16=[%INSERT_U16_HERE%]&U17=[%INSERT_U17_HERE%]&U18=[%INSERT_U18_HERE%]&U19=[%INSERT_U19_HERE%]&U20=[%INSERT_U20_HERE%]&ft_referrer=https%3A//www.upwork.com/ab/find-work/domestic&ns=https%3A//www.upwork.com/ab/account-security/login&cb=121066.74962680253
In chrome inspector, you see the following Image of inspector
Any help would be greatly appreciated!
Here is how the modal is structured:
div.modal-static
up-c-transition
div.modal-backdrop
div.modal
div.modal-dialog
div.modal-content
div.modal-header
up-c-header
div.header-wrapper
div
slot
button
up-c-icon
span.sr-only
sr-only
up-c-load-svg
svg
Code in inspector
I'm not sure how to get the name of the iframe I should switch to, this is my biggest issue. I believe maybe if I can switch to the iframe I can potentially interact with the modal buttons.
Edit - Here is the full code that is produced - https://codeshare.io/2WxdLE
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
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/
The issue I'm having is that when a modal is opened, the background body is scrollable using the mouse wheel.
Seems like this problem is known and people have suggested to set the body to overflow:hidden as stated in this link:
Prevent BODY from scrolling when a modal is opened
which works fine if your page is short and the modal link is on the initial visible page. However, if you have a longer page and you have to scroll down to see the modal link, once you click to open the modal, the background body shifts to the top.
The background does not scroll anymore, which is what I want, but is there any way to prevent it from popping back to the top when the modal is opened? It's inconvenient when you need to add multiple entries of something using the modal and you have to keep scrolling down to click the modal link to add another item.
In your onclick(I'm guessing you use onclick) event-method insert a return false; at the end, that will prevent the site from scrolling to the top.
I was having a similar problem in which modals larger than the window were cut off, and scrolling anywhere would scroll the background and not the modal.
This question pointed me to this plugin which is simple to use and fully addresses mine in addition to your problem of not permitting the background to scroll:
However this issue is said to be resolved in Bootstrap 3 and the plugin should not be needed if you're using the current version of Bootstrap.
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.