web-dev-qa-db-ja.com

ChromeおよびSafariのjQuery UIダイアログでのスクロールバーの問題

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

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

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

だから誰もが：

  1. これを修正しましたか？
  2. 適切なユーザビリティエクスペリエンスを提供する回避策の提案はありますか？

私はフォームのビット上でマウスオーバー/スクロールを実験していますが、それは素晴らしい解決策ではありません:(

EDIT：これに対する解決策を見つけるためにRowan Beentje（SO afaict）にいない）に小道具を提供します。jQueryUIはマウスアップ/マウスダウンイベントをキャプチャしてスクロールするため、以下のコードで修正されるようです。

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

自己の責任において使用してください、私はこのものをバインド解除する他の非モーダルな振る舞いが何を許すかもしれないかわかりません。

jqueryjquery-uisafarigoogle-chrome
42
alexis.kennedy

以前のポスターに同意します。ダイアログが機能しない場合は、デザインを再考することをお勧めします。しかし、私は提案を提供することができます。

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

7
Tim Banks

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

それは私のために問題を解決しました。これがあなたが探しているソリューションであることを願っています。

38
Ricardo Rodrigues

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

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();      
    });

    //...
}
2
Anton Palyok

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

なぜこれらのマウスダウンイベントとマウスアップイベントが最初に存在するのかを知りたいと思います。

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

2
Adrian Adkison

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

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

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

デザインが分からなくて、できる限りのことだと思います。

1
Seb

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

1
Jared Hales

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

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

これは動作します...しかし、これは醜いです

--from https://github.com/jquery/jquery-ui/pull/230#issuecomment-3630449

私の場合、魅力のように働きました。

1
linuxeasy

以下のコードを使用してください。正常に動作します。

$("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))
});
0
anand vishwakarma

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

0
Tracker1