jQueryUI Dialog positioning after vertical scrolling

Question

I have the following jqueryui dialog:

        $("#dialog").dialog({
        bgiframe: true,
        autoOpen: false,
        height: 420,
        hide: 'slide',
        modal: true,
        buttons: {
                            'Annuler': function() {
                $(this).dialog('close');
            },
            'Envoyer votre message': function() {}
}

When I display it with:

    $('#question-annonceur').click(function() {
        $('#dialog').dialog('open');
    });

It's pretty centered. But when I scrolled vertically, it"s not centered anymore. In fact, the dialog is still centered (regarding the scrollbar position set by the user), but the scrollbar had been scrolled up to the top of the window, and then, the dialog is not centered anymore (since it was centered regarding the new scrollbar position).

It's there a property I can set so that the scrollbar is not reset at the top like this?

Thanks.

Answer 1

Changing the CSS from position:absolute to position:fixed works for me :

.ui-dialog { position: fixed; padding: .1em; width: 300px; overflow: hidden; }

Answer 2

jQuery(window).scroll(function() {
    jQuery('#dialog').dialog('option','position','center');    });

works for me in jquery 1.9

This is assuming your dialog has id="dialog"