jQuery UI dialog: a huge DIV on the background in IE 8

Question

I'm trying to use jQuery UI's modal dialog and testing my stuff in IE8. Every time dialog pops up, a huge DIV is being created on the background and IE keeps changing vertical scroll bar's thumb size and if there was a huge page downloading in the background. In compatibility mode IE changes vertical scroll bar's thumb once, everything works as expected and it doesn't look like the page is still loading. jQuery UI's sample works for me just fine.

Here's my code:

$("#confirm_stage_change").dialog({
    autoOpen: false,
    bgiframe: true,
    modal: true,
    height: 300,
    width: 300,
    draggable: false,
    resizable: false
});

That's my "dialog":

<div id="confirm_stage_change" title="Confirm Stage Change">
    <p>
        Hello!!!
    </p>
</div>

Here's the DIV I see in the inspector:

<div class="ui-widget-overlay" style="z-index: 1001; width: 1069px; height: 20218px;" jQuery1257312441701="35">

Did anyone see something like that?

Thanks!

UPDATE: it happens in IE8 Standards mode (XHTML 1.0 Strict; jQuery UI's sample also gets broken in this mode), but no problems in IE 8 Quirks mode.

Answer 1

I found the answer on another post: JQuery UI modal dialog uses 100% CPU

Add the following style.

.ui-widget-overlay 
{ 
    position: fixed; 
}