I've a simple single page application. I want to implement tear off windows like functionality, like if I've a directive with a button in the tool bar that when clicked hides the directive in the main app, opens a pop up window (not a modal) and opens that directive in the popup window. Similarly when the button is clicked in the popup window it closes the popup window and the directive reappears in the main app.
Is it even possible? If so can you please provide me with some pointers?. so far I've looked into
https://github.com/bulkan/angular-popup
Couldn't even get the thing running :(
Any help would be highly appreciated ..
Cheers
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'm working on a javascript React-based application running under nwjs.
My task is: on a button click, display scrollable instructions in a dialog that users can drag to a second monitor, so they can do their work in the main window, following the instructions in my new dialog.
I only know how to make modal dialogs with React. How do I make a non-modal dialog, so the user can scroll through the instructions as needed while they work in the main window?
Window you create trought react, must stay in browser window.
Call new child window so you get new window that can be dragged across
desktop.
Window.open(url, [options], [callback])
See documentation
See for example:
http://www.retailmenot.com/view/macys.com
When you click on one of the buttons, it both automatically opens a new tab, and pop out their modal window.
What are the possible ways to do this?
They seem to do both actions with Javascript. They actually do something that keeps the window in the current tab and not on the one that was opened. How is it done?
In general, Can I achieve these two actions (nevermind if focus is on new window) with a regular form submission with target=_blank the new tab, and some class to pop the modal window? What should the javascript look like?
Is there any way to do this without javascript at all?
Basically I'm looking for practices that are supported from IE8+, and cross browser compliant.
See this : http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_win_open
You can open your js modal also inside myFunction() function.
I have a requirement to show modal popup on in netsuite on button click.
currently I open a window using client script
var url = nlapiResolveURL('SUITELET','customscript_id','customdeploy_id',null);
window.open(url);
Now I want to make this window as modal popup to prevent accessing the parent window. Please help.
You'll need to use existing solutions like
Bootsrap or Jquery UI's Modal Window.
If you want to be more elegant and avoid dependencies, you can create your own light implementation. Please, refer to how to make window.open pop up Modal?