JQuery modal won't render on top of lists in IE6

I have an aspx page that contains a JQuery UI modal (modal = true) and an asp.net list in a table. Whenever a modal call is called, it always appears behind the list, not at the top. I tried to set the z-Index property for both objects, but that doesn't seem to matter much. Please note that I have tried using absolute and relative positioning.

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

Here is a snippet of a line 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"


Here's the JQuery:

    <script type="text/javascript">

        $(function () {

                autoOpen: false,
                height: 250,
                width: 350,
                modal: true                  

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

        .click(function () {


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


Can anyone suggest something?



source to share

2 answers

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

Google for the "ie6 select z-index bug" for more information.



you probably want to use a bgiframe workaround

Edit: heres a better bgiframe answer with jQuery UI 1.8.9 Dialog and jQuery 1.5



All Articles