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"
></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 something?
thank
+3
source to share
2 answers
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
+2
source to share