jQuery UI：模式对话框焦点错误？答案

【问题标题】：jQuery UI: modal dialog focus bug?jQuery UI：模式对话框焦点错误？
【发布时间】：2024-01-23 14:37:01
【问题描述】：

我正在尝试创建一个模式对话框，该对话框具有垂直滚动的溢出内容。出于演示目的，此对话框包含一个锚点和一堆 div（溢出）。这是我的代码：

HTML

<body>
  <div id="dialog">
    <a href="javascript:void(null);">blah blah blah</a>
    <div>some content to make the dialog scroll appear</div>
    <div>some content to make the dialog scroll appear</div>
    <div>some content to make the dialog scroll appear</div>
    <div>some content to make the dialog scroll appear</div>
    <div>some content to make the dialog scroll appear</div>
    <div>some content to make the dialog scroll appear</div>
  </div>
</body>

jQuery

$(document).ready(function () {
  $('#dialog').dialog({
    position: 'center',
    height: 300,
    width: 200,
    modal: true
  });
});

演示：JS Bin

重现问题：

向下滚动到对话框底部
失去对实际浏览器窗口的关注（转到另一个窗口、单击桌面等）
将鼠标悬停在未获得焦点的浏览器窗口中的对话框上
在对话框中单击（或只是最小化/最大化您的浏览器窗口）

结果应该是对话框滚动回最顶部的锚标记（“blah blah blah”）。（这可能需要多次尝试在对话框中失去焦点/单击）JS Bin 代码使用的是 jQuery UI 1.10.2，但它也发生在 .3 中。

我相信我的问题可能与this SO question 相似，但它有点不同，因为我使用的是锚标签......但是，hasFocus.eq(0).focus(); 行是罪魁祸首。当该部分为我执行时，它会将我的锚标记作为hasFocus 数组中的第一个元素。无论哪种方式，对话框的默认行为都不应该滚动回顶部……它应该保持在原来的位置！

现在，有趣的是，一旦你删除了modal: true，问题就不再存在了……所以我不确定这是一个错误还是一个“功能”。有人有什么想法吗？

另外，我已经在 Firefox（多个版本和安全模式）和 IE8 中对此进行了测试。