ChromeとSafariのjQuery UIダイアログのスクロールバーの問題

StackOverflow https://stackoverflow.com/questions/1617638

質問

modal = true でjQuery UIダイアログを使用しています。 ChromeとSafariでは、スクロールバーとカーソルキーによるスクロールが無効になります（マウスホイールとページの上下スクロールは引き続き機能します）。

ダイアログが高すぎて1ページに収まらない場合、これは問題です。ラップトップのユーザーはイライラします。

誰かがこれを3か月前にjQueryバグトラッカーで提起しました- http://dev.jqueryui.com/ ticket / 4671 -修正が優先事項のようには見えません。 ：）

だから誰も：

  1. これを修正しますか？
  2. 適切なユーザビリティエクスペリエンスを提供する回避策が提案されていますか

フォームの一部でmouseover / scrolltoを試していますが、それは素晴らしい解決策ではありません：（

編集：これに対する解決策を見つけるためにRowan Beentje（SOに精通していない人）の小道具。 jQuery UIは、mouseup / mousedownイベントをキャプチャすることでスクロールを防ぎます。そのため、以下のコードで修正できるようです：

$("dialogId").dialog({
    open: function(event, ui) {
        window.setTimeout(function() {
            jQuery(document).unbind('mousedown.dialog-overlay')
                            .unbind('mouseup.dialog-overlay');
        }, 100);
    },
    modal: true
});

自己責任で使用してください。このようなものをアンバインドする他の非モーダルな動作が許可するものがわからない。

役に立ちましたか？

解決

前のポスターに同意します。ダイアログが機能しない場合は、デザインを再考するのが良いかもしれません。ただし、提案を提供できます。

ダイアログのコンテンツをスクロール可能なdiv内に配置できますか？この方法では、ページ全体をスクロールする必要がなく、div内のコンテンツのみがスクロールする必要があります。この回避策も簡単に実行できます。

他のヒント

次のコードを使用できます。 jquery.ui.dialog.patch .js

それは私のために問題を解決しました。これがあなたが探している解決策であることを願っています。

私は同意しますが、ビューポートよりも大きなダイアログを作成しないという関係者は、スクロールが必要になる場合があると思います。ダイアログは、1024 x 768を超える解像度では非常に良く見えるかもしれませんが、それよりも小さいものはクランチに見えます。または、たとえば、サイトのヘッダーの上にダイアログを表示したくないと言います。私の場合、ときどきFlash Z-Indexの問題がある広告があるので、その上にダイアログを表示したくありません。最後に、スクロールなどの一般的なコントロールをユーザーから奪うことは一般的に悪いことです。これは、ダイアログの大きさとは別の問題です。

これらのmousedownイベントとmouseupイベントが最初に存在する理由を知りたいと思います。

alexis.kennedyが提供するソリューションを試してみましたが、どのブラウザーでも見ることができるものを壊すことなく機能します。

ダイアログモーダルモードを無効にし、オーバーレイを手動で表示することで、この状況を回避します：

function showPopup()
{
    //...

    // actionContainer - is a DIV for dialog

    if ($.browser.safari == true)
    {
        // disable modal mode
        $("#actionContainer").dialog('option', 'modal', false);

        // show overlay div manually
        var tempDiv = $("<div id='tempOverlayDiv'></div>");
        tempDiv.css("background-color", "#000");
        tempDiv.css("opacity", "0.2");
        tempDiv.css("position", "absolute");
        tempDiv.css("left", 0);
        tempDiv.css("top", 0);
        tempDiv.css("width", $(document).width());
        tempDiv.css("height", $(document).height());
        $("body").append(tempDiv);
    }

    // remove overlay div on dialog close
    $("#actionContainer").bind('dialogclose', function(event, ui) {
        $("#tempOverlayDiv").remove();      
    });

    //...
}

ダイアログが大きすぎると、「まともなユーザビリティエクスペリエンス」の要件に反すると思います。 jQuery UI Dialogのバグのために回避策を必要としなかったとしても、そのような大きなダイアログは取り除きます。とにかく、私はあなたが適応する必要があるいくつかの「極端な」ケースがあるかもしれないことを理解しています、それで...

とはいえ、スクリーンショットを添付しておけば間違いなく役立ちます。デザインについて質問しているのですが、表示されません。しかし、あなたはその内容を表示することができない/できないことを理解しているので、それで問題ありません。これらは私の盲目の推測です。それらがあなたの役に立つことを願っています：

  • ダイアログの異なるレイアウトを試してください。これを行う場合は、問題が発生しているダイアログだけでなく、すべてのダイアログに対して行ってください（ユーザーは多くの異なるUIを学習することを好みません）。
  • 別のレイアウトが見つからない場合は、最初にダイアログを広げるを試してください。選択できるオプションが多数ある場合は、2つの列に分割して適切なソリューションを見つけることができます。
  • すでにjQuery UIを使用していることがわかっている場合は、タブを使用してみてください。オプションが多すぎる場合は、タブ付きパネルが通常良い解決策です。ユーザーはそのウィジェットに「使用」されます。
  • ダイアログで「アイテム」について話しましたが、アイテムが何であるかはわかりません。それらをクリックすると、左側に小さなリストが表示され、右側に展開ビューが表示されるなど、「要約」された方法でそれらを表示することは可能ですか？たとえば、アイテムのタイトルが左側にあるリストがあり、それらをクリックすると右側に完全な表示が表示されます。

デザインを見ることができなくても、私ができる限りではあると思います。

バインドされたイベントのバインドを解除する回避策があります。これにより、ダイアログボックスの以下のイベントがopen：イベントに追加されます。

$("#longdialog").dialog({
    modal:true,
    open: function (event, ui) { window.setTimeout(function () {
        jQuery(document).unbind('mousedown.dialog-overlay').unbind('mouseup.dialog-overlay'); }, 100);
    }
});

これは機能しますが、これはいです

- https://github.com/jquery/jqueryから-ui / pull / 230＃issuecomment-3630449

私の場合は魅力のように働いた。

これはその後修正されたバグです。 http://bugs.jqueryui.com/ticket/4671

ダイアログの拡張機能を試しましたか？ http://plugins.jquery.com/project/jquery-framedialog

以下のコードを使用します。正常に動作します。

$("dialogId").dialog({
      open: function(event, ui) {
            window.setTimeout(function() {
            jQuery(document).unbind('mousedown.dialog-overlay')
                        .unbind('mouseup.dialog-overlay');
             }, 100);
      },
      modal: true,
      safariBrowser: (function( $, undefined ) {
               if ($.ui && $.ui.dialog) {
                   $.ui.dialog.overlay.events = $.map('focus,keydown,keypress'.split(','), function(event) { return event + '.dialog-overlay'; }).join(' ');
               }
 }(jQuery))
});
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top