Question

我正在使用带有jQuery 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

带有选项卡的jQuery UI对话框

1 个答案: