How determine what Javascript code triggerd a modal dialog box? - javascript

I have a web page that uses several jQuery plugins. One of them is popping up a modal dialog box that has the title "Error" and no other information. I used the "inspect" option in Chrome DevTools to inspect it. But all I see is some HTML elements and not much else to help me figure who is popping up this modal dialog box (see HTML snippet below)>
Is there a way to use Chrome DevTools to have it break into the debugger when any modal dialog box is popped up?
Here is the dialog box's HTML:

Related

Selenium Python - Unable to close modal popup window - DOM not traversable

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

Close Chrome Print Preview Dialogue Box Using Javascipt

window.print() method will open print preview dialogue box. How to close that box using javascript.
Can we use Custom Events to dispatch "esc key", but don't know where to dispatch(Element).
I am afraid that you can't do this. Just like alert dialog, the print dialog will block the browser until you click cancel button or save button. You can try to run some codes when the print dialog is hanging, then you will find you can just input the codes in console but there is no output and the codes are not running. So I think you can't do that using javascript.

Dialog box minimizes on clicking elsewhere in the main window

I'm using
dialog.showMessageBox([browserWindow, ]options[, callback])
to confirm a delete operation.I expect the user to close the dialog box first in order to perform some other operations.However, when the dialog box pops up the user is still able to click other parts of the window and on doing so the dialog box minimizes automatically.
Is there a way to restrict a user not to do anything else unless the dialog box is closed ?
Note: On Atom Editor do the following:
File -> Open File , this results in a dialog box for opening a file and while this dialog box is opened, the user is not able to click on anything on the main screen. This is the same behavior I'm looking at.
Check out this feature that was recently added: https://github.com/electron/electron/pull/6140

Angularjs - How to open custom modal on leaving the page?

I'm in a bit of a pickle.
I have a form in the page. When user makes it dirty and tries to leave the page, a custom modal (mostly bootstrap modal) should pop up with a confirmation message as in "are you sure you want leave?"
I made a plunker which uses native browser's alert box (and also bootstrap pop modal). Alert box works - commented out. But modal is not working.
http://embed.plnkr.co/6LHacFZhZ74TxmyFY8f8/preview
Any help would be greatly appreciated.

Block rest of the view except a particular element

Sorry for the title couldn't come with a better one...Okay here's is my doubt, when we display a javascript alert using alert("Some text") we see the alert dialog , Now the enter UI except the dialog box is unresponsive unless we hit Ok or close the alert window, Same goes for the confirm dialog. I am trying to build a widget to display my custom Confirm dialog using HTML elements but I don't know how to block the UI, The user if he wants can ignore the dialog & click other elements on the UI, Any suggestions or workarounds on blocking?
You could build a simple overlay with your dialog. Your dialog could be absolutely positioned on the screen, allowing users to either click it or other elments to the side of it.
http://www.emanueleferonato.com/2007/08/22/create-a-lightbox-effect-only-with-css-no-javascript-needed/

Categories