Question

我正在创建一个jQuery对话框，可以从许多不同的按钮打开和关闭，一切正常，除非我关闭对话框，浏览器滚动到顶部。我已经在线尝试了很多建议，但似乎没有一个能够在阻止滚动的同时保持功能正常。

我是这样创建对话框的：

function create_hint_widget(hint_text) {
  if ($("#hint_dialog").hasClass("ui-dialog-content")) 
  {
    $("#hint_dialog").dialog("open");
    $("#hint_dialog").html(hint_text);
  }
  else
  {
    return $("<div id='hint_dialog' title='Help'>" + hint_text + "</div>")
      .dialog({
        resizable: true,
        height: 200,
        width: 300,
        modal: false,
        position: ['right', 180],
        close: function(ev, ui)
        {
          $("#hint_dialog").dialog("close");
        },
      });
  }
}

这是用于创建调用对话框的链接的Rails代码：

 <%= link_to image_tag("hint_link.jpeg", :size=>"13x13"),
 'javascript:;', :onclick => 'create_hint_widget("Enter a name for your template. Each template must have a unique name.");
 return false;' %>

我正在使用对话框的打开/关闭，因为我希望它保持其位置。 event.stopPropagation（）;不会停止滚动和event.preventDefault（）;打破开/关功能。可能最重要的是，当我删除close：function时，它不再滚动关闭，但某些打开/关闭功能停止执行。

Answer 1

问题在于

$("#hint_dialog").dialog("close");

我一直在玩，最终尝试了

$("#hint_dialog").hide();

它不再滚动到顶部。

Answer 2

在打开对话框之前，请检查您是否关注主体以外的其他任何元素（例如，输入字段或按钮等）。如果是，则在显示对话框之前尝试从任何元素找回焦点，如下所示：

if (document.activeElement) {
    document.activeElement.blur();
}

我猜想，它在关闭后会跳回到关注的项目。

或者，在打开对话框之前获取页面滚动值，如下所示： JavaScript get window X/Y position for scroll 然后捕获关闭事件，并在隐藏对话框后将滚动设置回先前保存的值。

jQuery对话框关闭滚动浏览器到顶部

2 个答案: