Issue with Confirm Dialog Overlaying Modal Dialog Component
Posted: Thu Feb 08, 2024 10:19 am
Hi, it's me again ![Wink ;)](./images/smilies/icon_e_wink.gif)
I'm encountering an issue where a confirm dialog is being displayed behind a modal dialog component in my CrossUI application.
Here's the scenario:
I display a modal dialog component.
Then, I trigger an "open confirm dialog" event, for example, when a form is modified and a "close dialog" event is triggered.
I confirm the action, and I trigger the "destroy" action on the dialog component. So far, everything is working correctly.
However, when I display the dialog component again (still in modal mode), and repeat the same action to trigger the "open confirm dialog," the problem occurs. The confirm dialog is displayed behind the dialog component. Consequently, I have to move the dialog component to see the confirm dialog behind it.
One possible solution is to modifiy xui framework to completely destroy the main span element that manages the display of this confirm dialog, rather than hiding it in CSS with visibility: hidden and z-index: 0. This way, when it's displayed again, it's recreated, and it's properly layered above all other objects on the page.
The only temporary workaround I've found is to not destroy my dialog component but to hide it instead and make it visible again for the next use. However, this approach poses a problem if I display other dialog components in future pages, as they might overlay subsequent confirm dialog displays.
Thanks
![Wink ;)](./images/smilies/icon_e_wink.gif)
I'm encountering an issue where a confirm dialog is being displayed behind a modal dialog component in my CrossUI application.
Here's the scenario:
I display a modal dialog component.
Then, I trigger an "open confirm dialog" event, for example, when a form is modified and a "close dialog" event is triggered.
I confirm the action, and I trigger the "destroy" action on the dialog component. So far, everything is working correctly.
However, when I display the dialog component again (still in modal mode), and repeat the same action to trigger the "open confirm dialog," the problem occurs. The confirm dialog is displayed behind the dialog component. Consequently, I have to move the dialog component to see the confirm dialog behind it.
One possible solution is to modifiy xui framework to completely destroy the main span element that manages the display of this confirm dialog, rather than hiding it in CSS with visibility: hidden and z-index: 0. This way, when it's displayed again, it's recreated, and it's properly layered above all other objects on the page.
The only temporary workaround I've found is to not destroy my dialog component but to hide it instead and make it visible again for the next use. However, this approach poses a problem if I display other dialog components in future pages, as they might overlay subsequent confirm dialog displays.
Thanks