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'm not sure I completely understand the question, but here is a stab at it:

jQuery UI's Dialog widget (in modal dialog mode) always puts a full page div over the content on the rest of the page by default. This is normal behavior. It probably does not appear in quirks mode because quirks mode is not supported by the jQueryUI team. If you do not want the dialog to have a content covering div, you should consider the other dialog options.

As far as scrollbars are concerned, normally these don't appear because of modal dialog being used. However, if your page is large enough to cause scrolling before the dialog appears, then browsers will react differently in all cases.

Answer 2

I found the answer on another post: http://stackoverflow.com/questions/1479983/jquery-ui-modal-dialog-uses-100-cpu

Add the following style.

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

Answer 3

working !!

great help !!

thank you