3

要するに: ドキュメントの高さ > ウィンドウの高さがある場合、下にスクロールしてダイアログを開きます - Firefox ではドラッグできません。jQuery UI 1.10.x のみで発生したバグ

再現方法:

jsfiddle:

http://jsfiddle.net/mefa/zrNNZ/15/

<html>
<head>
    <meta content="text/html; charset=UTF-8" http-equiv="content-type">
    <title>Jquery UI FF dialog bug - jsFiddle demo by mefa</title>
    <script src="//code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>
    <link href="/css/result-light.css" type="text/css" rel="stylesheet">
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js" type="text/javascript"></script>
    <link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" type="text/css" rel="stylesheet">
    <style type="text/css">
    html {
        font-size:12px;
    }
    body {
        height: 2000px;
    }
    </style>
    <script type="text/javascript">
    $(window).load(function(){
     $(function() {
        $( "#dialog-modal" ).dialog({
          height: 150,
          modal: true
        });
      });
    });
    </script>
</head>
<body>
<div title="Basic modal dialog" id="dialog-modal">
    <p>Drag this dialog to bottom of document in Firefox</p>
    <p>Bug only in jquery ui 1.10.x</p>
</div>
<p>Sed vel diam id libero rutrum convallis. Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet rhoncus, arcu felis ultricies neque, sit amet auctor elit eros a lectus.</p>
</body>
</html>

ビデオ: http://www.youtube.com/watch?v=_J8aepYHg4U

したがって、U に Jquery UI ダイアログがあり、タグ<body>に垂直スクロールがあるとします (たとえば、コンテンツが多く、テーブルが大きいなど)。ウィンドウの高さが800ピクセルで、ドキュメントの高さが2000ピクセルであるとします。したがって、すべてのコンテンツを取得するには、下にスクロールする必要があります。

次に、ウィンドウの高さ、たとえば1000pxまで下にスクロールして、ダイアログを開きます。その後、狂ったようにジャンプするため、他の位置に正しくドラッグすることはできません。

元のjquery uiの例に基づいてデモを記録したので、何かを見逃したり破損したりしたとは誰も言えません。私が変更したのは body css attr "height" だけで、大きなドキュメントをシミュレートするために 2000px に設定しました。

アドバイス/修正に感謝します。

4

4 に答える 4

5

突然、私は解決策を見つけました。

このバグを修正するには、次の CSS ルールを追加するだけです。

.ui-dialog {
    position: fixed;
}

しかし、これには副作用もあります。ダイアログの一部がウィンドウの範囲外にある場合、垂直/水平スクロールバーは表示されず、ダイアログの非表示部分に到達することはできません。Jquery UI チームからの適切な修正を待つ必要があります。

于 2013-07-29T12:16:45.220 に答える
5

これは jquery-ui バージョン1.10.3のバグです。以前のバージョンを含めることでこれを修正
できます。

<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js" type="text/javascript"></script>
于 2014-01-17T10:51:15.753 に答える
3

実際の修正は、jquery.ui.draggable.js の _convertPositionTo() と _generatePosition() を最新のマスター (1.10.3 が公式の現在のリリースであるため、修正は 1.11 で行われるはずです) にあるものから置き換えることです。今はそれらの css ハックを使用できません。

于 2013-10-16T01:47:00.000 に答える