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

前端之家收集整理的这篇文章主要介绍了javascript – jQuery UI多个对话框内容跳到顶部前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
如果在页面上打开多个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对话框选项,它没有任何区别.

解决方法

和Jared一样,我找到了描述你所遇到的bug的页面.它确实谈到1.9.2工作正常.

但是,大多数情况下,您不会回滚到项目的先前版本,我想找到一个能够保存当前文件解决方案.因此,我测试了那里提供的一些代码.我用你的jQuery 2.0.2版本和jQuery UI 1.10.3版本创建了一个html页面.

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

我用这段代码替换了jQuery UI文件(整个块)中的_moveToTop函数(你可以在同一个链接here中找到它):

_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;
},
原文链接:https://www.f2er.com/jquery/157808.html

猜你在找的jQuery相关文章