Example: Form1 Creates and shows Form2 (Form1 is hidden when showing form2). Button on Form2 creates and shows popup form with no problem. Popup form Hides instead of closing (to preserve data in the form). Hide Form2 and show Form1, then show Form2 and hide Form1, click on button for popup Form3 and it does not appear. Hidding Form2 and showing Form1 reveals the Popup Form3.
Tried using SetFocus, BringToFront etc. all with no luck, second time the Form3 is shown after hiding From2 and shoing it again results in Form3 being created behind Form2.
It is definitely a z-index issue. However, I if I try to set it before or after a Form3.Show it does not take. The Form3.OnShow event never fires after the first time it gets called, additional calls to Form3.Show bypass the OnShow event handler for the PopUp. The z-index assigned to the pop-up remains after a hide/show, however the calling Form2 z-index changes and increases (ends up matching the same z-index of the popup) when Form2.Show is called for from Form1.
I can compile fin with the form3.ElementHandle.style.setProperty('z-index','2000000'), however when it runs I get error message "Uncaught TypeError: Cannot read properties of null (reading 'style')"
What is in green uses a display: none; when the form is set to .Hide and is removed when the .show is called, however when Form2.Hide and then Form2.Show is called the z-index on that span has to be increased in order for the .show to work for the form in the div (red). Manually increasing the z-index in the chrome dev window causes it to show.
After watching the z-index on form2 changed, I realized that Form2 was being recreated, adding additional copies of the form, each with an increasing z-index, which explains the z-index issue.