How do I ensure that a WebDialogWindow is display on top of all other dialog windows if both are set to display centered on the page?
More info below:
I have 2 User Controls each containing UltraWebGrid surrounded by WebAsyncRefreshPanels. The controls are dropped on a main aspx form each surrounded by a WebDialogWindow - I'll call these dialog1 and dialog2. Both are set to Hidden inititially and set to be centered on the form.
Main aspx form javascript opens dialog1 with dialog.show(). Then dialog1 opens dialog2 with javascript. Now dialog2 is showing on top of dialog1 which is what I want.
I then close dialog2 with the 'x' button on the WebDialogWindow. Then try to reopen dialog2 from dialog1 again as in the first time round; dialog2 does not show. But when I close dialog1, dialog2 has been hidden behind dialog1. In other words dialog2 is hidden behind dialog1 when I close it the first time. It does not show on top when I try to open it again.
Hi Brit,
The order of display of html elements in browser is defined by their order in html. The element appears on top of all elements located in html above it. So, application should put both dialogs at the very bottom of aspx and ensure that they are located in the same container. Contents of dialogs (grids, user controls, etc.) should not affect order of dialog's painting.
That order can be changed if elements have style.position attribute set to a custom value like relative/absolute/static. I would suggest to keep that attribute with default value. I tested following and it works as you would expect.
<script type="text/javascript"> function openDialog(id) { var dialog = $find((id == 1) ? '<%=WebDialogWindow1.ClientID%>' : '<%=WebDialogWindow2.ClientID%>'); dialog.show(); } </script> <input type="button" value="open1" onclick="openDialog(1)" /> <ig:WebDialogWindow ID="WebDialogWindow1" runat="server" Height="157px" InitialLocation="Centered" Width="360px" WindowState="Hidden"> <ContentPane> <Template> <input type="button" value="open2" onclick="openDialog(2)" /> </Template> </ContentPane> </ig:WebDialogWindow> <ig:WebDialogWindow ID="WebDialogWindow2" runat="server" Height="157px" InitialLocation="Centered" Width="360px" WindowState="Hidden"> </ig:WebDialogWindow>