jQuery UI多个对话框内容跳到顶部

Question

如果在页面上打开多个jQuery UI对话框,其内容足以强制滚动条,则在对话框之间单击会导致活动的内容滚动到顶部.

你可以看到这个JSFiddle的例子(一个框在另一个框后面):http://jsfiddle.net/kRAd4/ 如果你向下滚动它们两个然后从一个框中点击到另一个框你会看到它发生.

有没有办法阻止这个？

这是JSFiddle网站上使用的代码,很简单:

HTML:

<div class="hi">Here<br />Is<br />A<br />Lot<br />Of<br />Text<br />Here<br />Is<br />A<br />Lot<br />Of<br />Text<br />Here<br />Is<br />A<br />Lot<br />Of<br />Text<br />Here<br />Is<br />A<br />Lot<br />Of<br />Text<br /></div>

<div class="hi">Here<br />Is<br />A<br />Lot<br />Of<br />Text<br />Here<br />Is<br />A<br />Lot<br />Of<br />Text<br />Here<br />Is<br />A<br />Lot<br />Of<br />Text<br />Here<br />Is<br />A<br />Lot<br />Of<br />Text<br /></div>

使用Javascript:

$(".hi").dialog({
    height: 200
});

更新:我已经尝试添加return false到两个mouseDown和focus对话框选项,并没有什么区别.

Answer 1

和贾里德一样，我找到了描述您遇到的错误的页面。它确实谈到 1.9.2 工作正常。

但是，大多数时候您不会回滚到项目的先前版本，我想找到一个保留当前文件的解决方案。因此，我用那里提供的一些代码进行了测试。我用你的 jQuery 2.0.2 版本和 jQuery UI 1.10.3 版本制作了一个 html 页面。

以下解决方案可以解决您的问题，但只有当您确定不会产生其他影响，或者您已经测试过它并对结果感到满意时，我才会使用它。

我_moveToTop用这段代码替换了 jQuery UI 文件（整个块）中的函数（您可以在此处的同一链接中找到它）：

_moveToTop: function( event, silent ) {
    var $parent = this.uiDialog.parent();
    var $elementsOnSameLevel = $parent.children();

    var heighestZIndex = 0;
    $.each($elementsOnSameLevel, function(index, element) {
        var zIndexOfElement = $(element).css('z-index');
        if (zIndexOfElement) {
            var zIndexOfElementAsNumber = parseInt(zIndexOfElement) || 0;
            if (zIndexOfElementAsNumber > heighestZIndex) {
                heighestZIndex = zIndexOfElementAsNumber;
            }
        }
    });
    var currentZIndex = this.uiDialog.css('z-index');

    var moved;
    if (currentZIndex >= heighestZIndex) {
        moved = false;
    } else {
        this.uiDialog.css('z-index', heighestZIndex + 1);
        moved = true;
    }

    if ( moved && !silent ) {
        this._trigger( "focus", event );
    }

    return moved;
},