Show a webdialog over a webdialog ? possible?

I’m going to test this now and see if a solution is possible.

It does appear to work by load order for simple dialogs, in my testing, but the z-index of the dialogs doesn’t seem to be calculated and applied at show, so that makes it unreliable. You can enforce it with something like this, before calling Show on the dialog:

ExecuteJavaScript( "$('#" + newDialog.ControlID + "').css('z-index', 10000);" )

I’m trying to set the z-index this way, setting 5 for the 1st dialog, and 10 to the 2nd
in the Opening event

Me.ExecuteJavaScript( "$('#" + Me.ControlID + "').css('z-index','10');" )

but still the 2nd is behind the first one…

ahhh before calling Show ?

Setting to a low value won’t work. There is likely to already be much more than 5 or 10 elements on the page.

If you want you can try jsPanel which I implemented with webSDK. You can find it here.

1 Like

I also have GraffitiAlert which calculates the minimum needed z-index for new dialogs.

I set a zindex of 5000 for 1st dialog, and 10000 for 2nd dialog
and call it before webdialog.show.
still the same.

thanks, nice but I don’t want any locked component in my apps…

1 Like

<https://xojo.com/issue/66151>

Not supported:

@Jean-Yves_Pochez I used Anthony’s code and just needed to change a little to make your code to work.

Add this line to your WebDialog1 Button1 Pressed event just before the code you have:

ExecuteJavaScript( "$('#" + WebDialog2Instance.ControlID + "_modal').css('z-index', 1100);" )
2 Likes

nice catch Alberto !
thanks Anthony for the ideas seeding.
in fact only “_modal” was missing. you only had to figure it !

1 Like

Good catch. What I get for posting browser code.

1 Like

this could work also for webmessagedialog I tried using “_dialog” instead of “_modal”
but it doesn’t
seems the webmessagedialog has no ID on the html side ?

so, I just made a websdk modaldialog control, using @Anthony_G_Cyphers recommendation to use a non visual control. it works fine, and by adjusting the zindex, I am able to position the modal dialog in front of all the other controls in the page. it mimics the xojo webmessagedialog as best as I can.

1 Like

using this browser extension : DevTools z-index - Chrome Web Store
I was able to discover that
xojo dialogs use a z-index of 1050
xojo dropdown menus uses a z-index of 1040
all standard elements of a webpage uses a z-index of 1-5

1 Like

2021-10-12 23-30-33.2021-10-12 23_32_27.2021-10-12 23_36_11
an extra large modal dialog

You can view the computed values using the browser’s built-in inspector. No need to install browser extensions.

I find it easier to have a table with all the z-indexes