Scrollbar Problem mit jQuery UI-Dialog in Chrome und Safari

Question

Ich verwende den jQuery UI Dialog mit modal=true. In Chrome und Safari, dies deaktiviert über die Bildlaufleiste und Cursortasten scrollen (Scrollen mit dem Mausrad und Seite nach oben / unten noch funktioniert).

Dies ist ein Problem, wenn der Dialog zu groß ist auf einer Seite zu passen -. Benutzer auf einem Laptop frustriert

Jemand hebt diese vor drei Monaten auf dem jQuery Bug-Tracker - http://dev.jqueryui.com/ Ticket / 4671 - es sieht nicht wie Festsetzung es eine Priorität ist. :)

So hat jemand:

1. haben eine Lösung für dieses?
2. hat eine vorgeschlagene Abhilfe, die eine anständige Usability Erfahrung geben würde?

Ich experimentiere mit Mouseover / scrollTo auf Bits der Form, aber es ist nicht eine große Lösung: (

EDIT: Requisiten Rowan Beentje (die SO AFAICT nicht ist) für eine Lösung dieses Problems zu finden. jQuery UI verhindert durch die Erfassung der mouseup / mousedown- Ereignisse zu scrollen. So Sie den Code unten scheint es zu beheben:

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

Benutzung auf eigene Gefahr, ich weiß nicht, was andere unmodal Verhalten unbinding dieses Zeug erlauben könnten.

Answer 1

ich mit den vorherigen Plakaten, dass zustimmen, wenn der Dialog nicht für Sie arbeitet, kann es gut sein, Ihr Design zu überdenken. Allerdings kann ich einen Vorschlag bieten.

Könnten Sie den Dialog Inhalt in einem scrollbaren div setzen? Auf diese Weise statt die ganze Seite blättern, nur der Inhalt innerhalb des div benötigen müssten blättern. Diese Problemumgehung sollte recht einfach zu zu erreichen.

Answer 2

Sie können diesen Code verwenden: jquery.ui.dialog.patch Js

Es löste das Problem für mich. Hoffe, dass dies die Lösung, die Sie suchen.

Answer 3

Während ich mit einigen, die Leute in der Partei nicht einen Dialog zu machen, die größer als das Bildfenster ist, denke ich, gibt es Fälle, in denen Scrollen notwendig sein können. Ein Dialog könnte sehr gut aussieht in einer Auflösung größer ist die 1024 x 768, aber etwas weniger Blicke knirschten. Oder sagen Sie zum Beispiel nie einen Dialog zu zeigen, bis über den Kopf Ihrer Website möchten. In meinem Fall habe ich Anzeigen, die occassionally Flash-z-index Probleme haben, so will ich nie Dialoge über sie zeigen. Schließlich ist es in der Regel schlecht, jede Art von gemeinsamer Kontrolle zu nehmen, wie Scrollen, vom Benutzer weg. Dies ist ein Problem getrennt von, wie groß der Dialog ist.

würde ich daran interessiert sein zu wissen, warum die diejenigen mousedown- und mouseup Ereignisse sind in erster Linie dort.

habe ich versucht, die Lösung, die zur Verfügung gestellt alexis.kennedy und es funktioniert Pause, ohne etwas zu brechen, dass ich in jedem Browser zu sehen.

Answer 4

ich umgehen diese Situation durch Dialog modal deaktivieren und zeigt Overlay manuell:

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

    //...
}

Answer 5

Ich glaube, zu groß Dialoge mit gegen Ihre "anständig Usability Erfahrung Anforderung. Auch wenn Sie nicht eine Abhilfe durch den jQuery UI Dialog Bug haben müssen, würde ich loswerden so große Dialoge bekommen. Wie dem auch sei, ich verstehe es einige ‚extremen‘ Fälle, in denen Sie anpassen müssen, so ...

Das heißt, würde es sicherlich helfen, wenn Sie einige Screenshot beigefügt - Sie eine Frage zu einem Design zu fragen, aber wir können es nicht sehen. Aber ich verstehe Sie nicht in der Lage sein könnte / bereit, den Inhalt zu zeigen, so dass ist in Ordnung. Das sind meine blinden Vermutungen; hoffen, Sie finden sie nützlich:

• Versuchen Sie, ein anderes Layout für Ihren Dialog. Wenn Sie dies tun, es für alle Dialoge, nicht nur diejenigen, die Sie haben Probleme mit (Nutzer nicht, wie viele andere UIs lernen).
• Wenn Sie nicht ein anderes Layout finden können, versuchen Sie Erweiterung Ihres dialog zuerst. Wenn Sie viele Optionen zur Auswahl haben, können Sie eine gute Lösung finden, indem sie in zwei Spalten aufgeteilt wird.
• Wissen Sie bereits jQuery UI verwenden, versuchen Sie mit Tabs . Wenn Sie zu viele Möglichkeiten, ein Tabbed-Panel ist in der Regel eine gute Lösung -. Benutzer ‚verwendet‘ zu diesem Widget
• Sie sprachen über ‚Elemente‘ im Dialog, aber wir wissen nicht, was ein Artikel ist. Ist es überhaupt möglich, sie in einem ‚zusammengefasst‘ Art und Weise wie eine kleine Liste auf der linken Seite und einer erweiterten Ansicht auf der rechten Seite zu zeigen, wenn Sie darauf klicken? Um zum Beispiel eine Liste mit den Einzelteilen Titel auf der linken Seite haben, und wenn Sie darauf klicken erhalten Sie die vollständige Anzeige auf der rechten Seite.

Ohne das Design sehen zu können, ich denke, das ist so weit ich gehen kann.

Answer 6

Es gibt eine Abhilfe, die das Binded Ereignis entbinden. Dies fügt die folgend im Freien: Ereignis des Dialogs:

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

Das funktioniert ... aber das ist hässlich

- von https://github.com/jquery/jquery -ui / Zug- / 230 # issuecomment-3.630.449

Arbeitete wie ein Zauber in meinem Fall.

Answer 7

Dies ist ein Fehler, der seit behoben wurde: http://bugs.jqueryui.com/ticket/4671

Answer 8

Haben Sie versucht, meine Erweiterung zum Dialog? http://plugins.jquery.com/project/jquery-framedialog

Answer 9

Verwenden Sie den Code unten. Es wird funktionieren.

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