jQueryUI Dialog positioning after vertical scrolling

Question

Hi, 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

I was desperately looking for the solution for the jquery ui dialog scrolling problem for a week.

Hats off for npen answer, worked like a charm!