I have an HTML page with an Iframe inside. I need to show the iframe in Fullscreen mode, and when I'm in such mode I need to show some Modal dialogs which are placed within the "base" HTML page.
As a solution I tried to dinamically append the dialog to the iframe's body. The modal shows, but the actions aren't executed (button clicks, etc.). I'd like to avoid, if possible, to recreated the event listeners each time I've to show a modal dialog.
Anyone with the same problem?
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
My application gives users a specific amount of time to pay for a service. We do this because we can only keep their reservation for X amount of time.
The time we give them should be sufficient, however if they are running out of time we notify them with a Bootstrap Modal as shown below:
However, as soon as the modal achieves focus by the user clicking on the button or anywhere on the modal window, the PayPal browser window moves behind the main window. See picture below.
Simple clicking anywhere on the black overlay will bring the Paypal browser window back. However, I was hoping that someone might have some idea on how to achieve this using the button click in the modal.
In other words, how can I bring the Paypal browser window back to the front by clicking on the 'Yes Please' button on the modal or the close event of the modal?
I have tried to simulate the clicking of the overlay element in code but it does not seem to work.
Here is the code of the page:
From what I have read because the PopUp browser window is being opened from an iframe and the content is from a different source I cannot access the popup for security reasons. So there is no way to move it to the front unless the user clicks the dark overlay or the link 'Click to Continue'
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.
I am writing a widget which gets embedded on other pages (on other domains) via an iframe. A click anywhere on the widget/iframe should bring up a dialog. The dialog does not fit in the dimensions of the iframe.
I cannot trigger the dialog from inside the widget/iframe since it will get clipped by the iframe dimensions.
A user of the widget also includes a JS from my site. But I cannot listen to onclick events on the iframe (on the host page) since they aren't any onclick events on an iframe.
What's a good, secure way of resolving this which will reliably work on all modern browsers?
Have a look at these PostMessage plugins 1 / 2 which allow you to communicate i.e. pass messages between an iFrame on another domain and the parent page.
This means you can listen for the click on the iFrame, then send a message to the parent. When the parent receives that message, it can then show a dialog
Am trying to display a file in a modal window when a button in an iframe is clicked. The iframe is present in a main window and an iframe is also there where we have kept a button to view the file in a modal window.
The modal window is working fine, but it opens in the iframe itself, but i want that to come out of the iframe and get displayed as a modal window.
HTML and Javascript for the view button where the modal window is called in onClick()
<span class="btn" title='hh' onClick="window.parent.showModal('../sales_stock/stockForm.php',1160,600);">Add New Stock Statement</span>
the show modal function is responsible for poping up the modal window.
I want to know what i should do to make the modal window pop out of the iframe.
If your iframe content from the same domain as you page you can subscribe to the click event from the main page and show popup from the main page. You can't overlap iframe borders from inside.
On the main page:
$("#myframe").contents().find("#button-inside-of-iframe").click(function(){
$('#mypopup').show();
});