Question

I have a link:

<a class="fg-button ui-state-default fg-button-icon-left assistButton" pbcType="download" title="Click for download information"><span class="ui-icon ui-icon-document"></span>File</a>

And I have some jQuery:

$(".assistButton").click(function(){
        $('#dialog').css('color', '#000000');
        $("#dialog").dialog({ 
            bgiframe: true,
            position: 'center',
            width: $(window).width()-80,
            height: $(window).height()-80,
            title: 'Some title',
            modal: true,
            buttons: { "Close": function() { $(this).dialog("destroy"); }}
        });
})

This works (the dialog opens properly) until you scroll down the screen. Once you scroll down the screen the dialog does not appear, the screen does go gray since it is a modal dialog.

I was under the assumption that

position: 'center',

would center it in the screen but I guess it’s centered left to right, not top to bottom…?

When in IE it works fine, when in firefox on Windows or OS X it does not work.

What am I missing? I’ve found a few others (http://dev.jqueryui.com/ticket/4539 as an example), around the web but nothing has worked so far.

Edit:
In firefox it opens but it is “above the fold” and I cannot scroll up to it. It’s there, I just can’t see it.

Answer 1

The jQuery UI 1.8.3 or 1.8.4 (due to a mis-build 1.8.3 == 1.8.4) release made some changes in this department, most notably this one:

DIALOG
The dialog plugin has also been updated to allow full usage of the position utility. Setting the dialog’s position with a string or array is still possible, but will be removed in a future version.

The positioning was overhauled to use the base position utility shared amongst the widgets so the code to handle things like a scrolled page is handled much more cleanly now. In the one problem page we had with your bug, the 1.8.4 release fixed it.