3

I have an aspx page that contains a JQuery UI modal (modal=true) and a asp.net listbox within a table. Whenever the modal is called, it is always displayed behind the listbox instead of on top. I've tried setting the z-Index property on both objects but this does not seem to make much difference. Note that i have tried using both absolute and relative positioning.

This only happens in IE6. IE 7 is fine but unfortunately I need to use the IE6 browser.

Here's a row snippet from the table containing the ListBox:

                        <tr style="position: relative; z-index: 80;">
                            <td colspan="3" style="position: relative; z-index: 80;">
                                <asp:ListBox ID="lstSites" runat="server" Height="100px" Width="100%" SelectionMode="Multiple"
                                    ></asp:ListBox>
                            </td>
                        </tr>

Here's the JQuery:

    <script type="text/javascript">

        $(function () {
            $("#dialog:ui-dialog").dialog("destroy");

            $("#helpModal").dialog({
                autoOpen: false,
                height: 250,
                width: 350,
                modal: true                  
            });

            $("#<%= imgHelpIcon.ClientID %>")

        .click(function () {
            $("#helpModal").dialog("open");
        });
        });



    </script>

<%--Help modal s--%>
<div id="helpModal" class="" title="Help!!" style="z-index: 100;">
    <div style="z-index: 300;">
        <h4>
            Help info.....
        </h4>
    </div>
</div>

Can anyone suggest anything?

thanks

Alexei Levenkov
  • 98,904
  • 14
  • 127
  • 179
user1266826
  • 31
  • 1

2 Answers2

3

The only way I know to deal with this in IE6 is to hide the ListBox (select element) or to put the popup in an iframe.

Google for "ie6 select z-index bug" for more info.

Joe
  • 122,218
  • 32
  • 205
  • 338
  • When I had this problem, I would just use a jquery selector to find and hide all the selects and flash objects (yes those do this too) on the show event of the dialog, and the re-display them on the close event. – ctorx Mar 13 '12 at 16:22
2

You probably want to use the bgiframe workaround.

Edit: here's a better answer.

halfer
  • 19,824
  • 17
  • 99
  • 186
Andrew Bullock
  • 36,616
  • 34
  • 155
  • 231