jquery ui dialog and our dearest friend, ie6

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 had a similar problem at one point.

$('.addButton').click(function(e) {
    e.preventDefault();
    $('#dialogWindow').load('http://myurl');
    var y = window.pageYOffset;
    var x = window.pageXOffset
    $dialog.dialog('open');
    window.scrollTo(x, y); // horizontal and vertical scroll targets
});

What the above should do is grab your current scroll coordinates and saves them. Once the dialog opens you then scroll back to the prior position in memory. Should be near instant and unseen by the user.

Answer 2

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.