Show a webdialog over a webdialog ? possible?

I want to display a webdialog over another webdialog.
it seems doable, using myWebDialog.Show
but the 2nd dialog is shown behind the first one !

how can I specify to display the second dialog in front of the first one ?
or is it a bug ?


Stacking dialogs is a bad idea and, as you can see, doesn’t work well. You should refactor your UI so that you don’t need to do this.

it could work if only the second dialog would show over the first one !

I’m pretty sure I tried this with a former web2 version and it worked…

You could potentially make it work by manually setting the CSS z-index (there are some places where dynamically calculating this property is necessary) of the second dialog, but I’d recommend reevaluating your needs and refactoring. This has never worked in Web 2.0 to my knowledge as I brought it up in an early build and I’m sure there are other threads around here about that.

1 Like

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
still the same.

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

1 Like


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);" )

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 ?

Forum for Xojo Programming Language and IDE. Copyright © 2021 Xojo, Inc.