Search code examples
javascriptbootstrap-4paypal-rest-sdk

How to bring popup browser window to the front so its on top of all browser windows?

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:

enter image description here

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.

enter image description here

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:

enter image description here

Solution

  • 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'