Question

I’m using the jquery ui dialog for a modal popup dialog. It’s working great in Firefox/Chrome but terrible in ie6.

Problem:
When I show the dialog in ie6, the browser window grows and automatically scrolls down to the bottom. The height increase and automatic scroll-down is equal to the height of the jquery dialog.

I can scroll up and then use the dialog as normal, but the behavior where it grows the window and drops is maddeningly unacceptable.

Here is how I’m launching the window:

<div id="dialogWindow"></div>

...

       $(document).ready(function() {
            var $dialog = $("#dialogWindow").dialog({
                autoOpen: false,
                modal: true,
                minWidth: 560,
                width: 560,
                resizable: "true",
                position: "top"
            });

            $('.addButton').click(function(e) {
                e.preventDefault();
                $('#dialogWindow').load('http://myurl');
                $dialog.dialog('open');
            });
        });

I am already using the bgiframe plugin for jquery which is key for ie6 overlay issues. But this seems unrelated to that. Has anyone seen this before and found a work around?

Answer 1

I’ve seen this behavior before and it is usually caused by the overlay. When you use the {modal: true} option an overlay is created and rendered with bgiframe support if the plug-in is loaded.

First off, try turning {modal: false} and see if you aren’t getting page blow-out then we know it’s the overlay.

there are a few things to check if that is the culprit;

• check that the styles for the overlay are loading correctly, you’ll need to include the jquery-ui dialog.css
• try experimenting with position: and float: styles
• try moving your dialog markup just above the < / body> tag, allowing the modal overlay to escape correctly.