Question

我正在尝试创建一个模式对话框，其中包含溢出内容的垂直滚动。出于演示目的，此对话框包含一个锚和一堆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中测试了这个。

Answer 1

根据bug report，这已得到修复，并在jQuery UI 1.11.0中。

jQuery UI：模态对话框焦点错误？

1 个答案: