bgiframe with jQuery UI 1.8.9 Dialog and jQuery 1.5

Question

So I am using jQuery UI's dialog box. But as I have a read there is a common bug within IE6 (which is unfortunate that I have to make sure this works for) where dropdown lists do not pay attention to z-index queues. I have also read that there is a handy plugin out there called bgiframe to take care of my overlay woes. I have found 2 different ways people say to use it, and neither work. I may just be doing something really stupid but I need to get this working.

including jQuery.bgiframe.js Version 2.1.1 Here are the 2 ways I have attempted to use it without working: (I have included all jQuery-UI, jQuery, and bgiframe in the page that I am working on)

1. The documentation from the actual plugin says do this:

   $("#selectDropdownThatNeedsFixing").bgiframe();
   

   This cause a jQuery exception saying saying Object expected.

2. The second way that I saw from the following page: http://docs.jquery.com/UI/Dialog/dialog basically you just set bgiframe: true when you initialize the dialog:

   $( ".selector" ).dialog({ bgiframe: true });
   

This does not error out, but the problem still exists within IE6 when I test it out.

Am I missing something? Which way am I supposed to use bgiframe? Any direction would be much appreciated. Thank you for your help!

Answer 1

You don't need to use a plugin for this. The problem with IE6 and z-index is, positioned elements in IE6 generate a new stacking context starting with a z-index value of 0. Therefore z-index doesn’t work correctly in IE6. The workaround to this issue is to specify a z-index value in the parent selector that is equal to the z-index specified in the child selector.

Check working example at http://jsfiddle.net/ebgnu/2/

Below is the example i did in jsfiddle.

.parent{
    position: relative;
    color:white;
}
.parent#a {
    height: 2em;
    z-index: 1;
}
.parent#a .child{
    position: absolute;
    height: 6em;
    width: 2em;
    z-index: 1;
    background:blue;
}
.parent#b {
    height: 2em;
    background:red;
}

<div class="parent" id="a">
    <div class="child">a</div>
</div>
<div class="parent" id="b">
    <div class="child">b</div>
</div>

Look at .parent#a This is the parent of the child selector a that have a z-index of 1. In this example, a will be on top of b. let's say we want to make b on top on a. All we need to do is change values of both the child a and it's parent to z-index: 0. This will send it to the back.

Answer 2

I believe that you're supposed to call the bgiframe plugin on the dialog, not the < select >. The current jQuery UI version doesn't seem to list the bgiframe option for the dialog widget anymore.

The jQuery Exception you're getting seems to indicate, that the element that you're targeting doesn't exist for the selector specified (#selectDropdownThatNeedsFixing).

If the problem persists, try to use the IE Developer Toolbar to find out if the iframe is actually created.