I have a link on my page which, when clicked, opens a new tab with another page inside (which is not under my control). Since I redirected my user to this page I would like to explain to them now what they are supposed to do on this page ("Now please press the green button on this page."). I would like to open a dialog with the explanation. I can live with the user having to close this dialog prior to following the advice.
I tried using onclick="alert('<msg>');" in the link. But this first created the dialog and only when the user closed the dialog, the link got followed. The UX was disrupted. I could give a message like "You will now open a new window; on this please do the following …", but I would prefer to display the dialog over the new page instead.
I tried using an onclick="setTimeout(function() { alert('<msg>'); }, 3);" (as described in this answer). This actually opens the new page in a new tab but then switches back to my original one when the dialog appears asynchronously. This disrupts the UX again; I would of course prefer to have the dialog appearing over the new page.
Is there any way of achieving what I aim at? I would like to open the new page, have it visible, keep it visible, and then display an explanation to the user while the new page is visible. Is there any way to achieve this?