带有选项卡的jQuery UI对话框

Question

I am using a tabbed interface with jQuery UI. That is working fine. Each tab is actually a form. So when that form is submitted the action brings the user back to the same page. But at that point I want to open the appropriate tag.

So, I am using a URL which looks something like this.

domain.com/page.php#tab1

Which works fine and opens the correct tab. There is a slight issue with the scroll position of the page. Which is due to the anchor position on the page. I want the scroll to be at the top of the page so I am using something like this to get back to the top.

$('html, body').animate({ scrollTop: 0 });

So, all that is fine. However, I then open a modal dialog and it is positioned incorrectly because of the scroll that has happened.

I have done research and have found this suggestion for repositioning the modal :

$('my-selector').dialog('option', 'position', 'center');

but that does not seem to work.

So how do I get this to play nice ?

My simplified code is as follows:

html

<div id="tester">
</div>

scripts - in document ready

$('html, body').animate({ scrollTop: 0 });#

jQuery('#tester').dialog
({
title: "Attribute " ,
minWidth: 840,
height:500
});

Actually in the real version the dialog is opened with a click handler. So, the animation is definitely complete by the time the dialog is opened. So I am confused about why the modal is appearing at the bottom of the page.

Thanks in advance

Answer 1

If you ensure that the dialog is opened on the complete callback of the .animate() method, you should not have any issues.

What is likely occurring is that the animation is still in transition while the dialog is being opened, so the internal calculations for its position are incorrect. Below is a basic example:

$('#button').click(function () {
    $('html, body').animate({
        scrollTop: 0
    }, openDialog);
});

function openDialog() {
    jQuery('#tester').dialog({
        title: "Attribute ",
        minWidth: 840,
        height: 500
    });
}

jsfiddle