Question

The demo at http://jqueryui.com/demos/dialog/ states the following:

The basic dialog window is an overlay
positioned within the viewport and is
protected from page content (like
select elements) shining through with
an iframe. It has a title bar and a
content area, and can be moved,
resized and closed with the ‘x’ icon
by default.

Can someone explain to me how their demo hides the select in IE6, as stated, but in my simple jsFiddle demo, the select shines through?

HTML:

<div id="dialog">Hello</div>

<select>
  <option>Red</option>
  <option>Green</option>
  <option>Blue</option>
</select>

JS:

$("#dialog").dialog();

Answer 1

Ok. I figured it out. Apparently, looking at the source of the demo, they include bgiframe and, if that plugin is present, jQuery UI uses it with it’s dialogs.

So for anyone wondering the same thing, simply include bgiframe in your project and you will be good to go.

---

On a side note, you would think that somewhere in their demo, they would mention that they were using the bgiframe.