带有标签的 jQuery UI 对话框

Question

我正在使用带有 jQ​​uery UI 的选项卡式界面。那工作正常。每个选项卡实际上是一个表单。因此，当提交该表单时，该操作会将用户带回同一页面。但那时我想打开相应的标签。

所以，我使用的 URL 看起来像这样。

domain.com/page.php#tab1

这可以正常工作并打开正确的选项卡。页面的滚动位置有一个小问题。这是由于页面上的锚点位置。我希望滚动条位于页面顶部，因此我使用类似这样的方式返回顶部。

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

所以，一切都很好。但是，然后我打开一个模态对话框，由于发生了滚动，它的位置不正确。

我进行了研究，发现了重新定位模态的建议：

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

但这似乎不起作用。

那么我怎样才能让它玩得很好呢？

我的简化代码如下：

html

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

脚本 - 准备就绪

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

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

实际上，在实际版本中，对话框是通过单击处理程序打开的。因此，在打开对话框时，动画绝对是完整的。所以我很困惑为什么模态出现在页面底部。

提前致谢

Answer 1

如果您确保在 .animate() 方法的完整回调上打开对话框，您应该没有任何问题。

可能发生的情况是，在打开对话框时动画仍处于过渡状态，因此对其位置的内部计算不正确。下面是一个基本的例子：

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

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

jsfiddle