it-swarm.com.de

Scrollbar-Problem mit dem jQuery-UI-Dialogfeld in Chrome und Safari

Ich benutze den jQuery UI-Dialog mit modal=true. In Chrome und Safari wird das Scrollen über die Bildlaufleiste und die Cursortasten deaktiviert (das Scrollen mit dem Mausrad und die Seite nach oben/unten funktionieren weiterhin).

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

Jemand hat dies vor drei Monaten auf den jQuery-Bug-Tracker - http://dev.jqueryui.com/ticket/4671 angehoben - es scheint nicht so, als ob das Problem behoben werden sollte. :)

So macht es jeder:

  1. habe einen Fix dafür?
  2. haben einen vorgeschlagenen Workaround, der eine anständige Usability-Erfahrung ergeben würde?

Ich experimentiere mit Mouseover/Scrollto auf Bits des Formulars, aber es ist keine gute Lösung :(

EDIT: Requisiten an Rowan Beentje (der nicht auf SO afaict) steht, um eine Lösung dafür zu finden. Die jQuery-Benutzeroberfläche verhindert das Scrollen, indem die Ereignisse mouseup/mousedown erfasst werden. Der folgende Code scheint das Problem zu beheben:

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

Verwenden Sie auf eigene Gefahr, ich weiß nicht, was andere unmodale Verhaltensweisen, die dieses Zeug unverbindlich machen, zulassen könnte.

42
alexis.kennedy

Ich stimme mit den vorherigen Plakaten darin überein, dass es gut sein kann, wenn der Dialog für Sie nicht funktioniert. Ich kann jedoch einen Vorschlag unterbreiten.

Könnten Sie den Dialoginhalt in ein scrollbares div einfügen? Auf diese Weise müsste anstelle der gesamten Seite ein Bildlauf durchgeführt werden. Diese Problemumgehung sollte auch ziemlich einfach sein.

7
Tim Banks

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

Es hat das Problem für mich gelöst. Ich hoffe, das ist die Lösung, nach der Sie suchen.

38

Umgehen Sie diese Situation, indem Sie den Modus "Dialogmodus" deaktivieren und die Überlagerung manuell anzeigen:

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

Obwohl ich damit einverstanden bin, dass die Leute in der Gruppe keinen Dialog machen, der größer als der Darstellungsbereich ist, denke ich, gibt es Fälle, in denen das Scrollen erforderlich sein kann. Ein Dialog sieht zwar mit einer Auflösung von mehr als 1024 x 768 sehr gut aus, alles andere sieht jedoch weniger scharf aus. Oder Sie möchten zum Beispiel nie, dass ein Dialog über der Kopfzeile Ihrer Site angezeigt wird. In meinem Fall habe ich Anzeigen, die gelegentlich Flash-Z-Index-Probleme aufweisen. Ich möchte also nicht, dass Dialoge darüber angezeigt werden. Schließlich ist es im Allgemeinen schlecht, dem Benutzer jegliche übliche Kontrolle, wie Scrollen, wegzunehmen. Dies ist ein Problem, unabhängig davon, wie groß der Dialog ist. 

Ich würde gerne wissen, warum diese Mousedown- und Mouseup-Ereignisse überhaupt vorhanden sind. 

Ich habe die Lösung ausprobiert, die alexis.kennedy zur Verfügung gestellt hat, und es funktioniert ohne zu brechen, was in jedem Browser sichtbar ist. 

2
Adrian Adkison

Ich glaube, zu große Dialoge sind gegen Ihre Forderung nach 'anständiger Benutzerfreundlichkeit'. Selbst wenn Sie aufgrund des jQuery-UI-Dialogfehlers keine Problemumgehung benötigen, würde ich solche großen Dialoge loswerden. Wie auch immer, ich verstehe, dass es einige "extreme" Fälle gibt, in denen Sie sich anpassen müssen, also ...

Das würde sicherlich helfen, wenn Sie einen Screenshot anhängen - Sie stellen eine Frage zu einem Design, aber wir können es nicht sehen. Aber ich verstehe, dass Sie nicht in der Lage sind/wollen, den Inhalt zu zeigen, also ist das in Ordnung. Dies sind meine blinden Vermutungen; hoffe du findest sie nützlich:

  • Versuchen Sie ein anderes Layout für Ihren Dialog. Wenn Sie dies tun, tun Sie dies für alle Dialoge, nicht nur für die, mit denen Sie Probleme haben (Benutzer möchten nicht viele verschiedene Benutzeroberflächen lernen).
  • Wenn Sie kein anderes Layout finden können, versuchen Sie zuerst Ihren Dialog zu erweitern . WENN Sie viele Optionen zur Auswahl haben, können Sie eine gute Lösung finden, indem Sie sie in zwei Spalten teilen.
  • Wenn Sie wissen, dass Sie die jQuery-Benutzeroberfläche bereits verwenden, versuchen Sie es mit tabs . Wenn Sie zu viele Optionen haben, ist ein Bedienfeld mit Registerkarten in der Regel eine gute Lösung - Benutzer werden von diesem Widget verwendet.
  • Sie haben im Dialog über 'Elemente' gesprochen, aber wir wissen nicht, was ein Element ist. Ist es überhaupt möglich, sie "zusammengefasst" anzuzeigen, z. B. eine kleine Liste links und eine erweiterte Ansicht rechts, wenn Sie darauf klicken? Wenn Sie beispielsweise eine Liste mit den Elementtiteln auf der linken Seite haben und wenn Sie darauf klicken, wird die vollständige Anzeige auf der rechten Seite angezeigt.

Ohne das Design sehen zu können, denke ich, dass es soweit geht, wie ich kann.

1
Seb

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

1
Jared Hales

Es gibt eine Problemumgehung, die das gebundene Ereignis aufhebt. Dies fügt im open: event des Dialogs Folgendes hinzu:

$("#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

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

Funktionierte in meinem Fall wie ein Zauber.

1
linuxeasy

Verwenden Sie den folgenden Code. Es wird gut 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))
});
0

Haben Sie meine Erweiterung für den Dialog ausprobiert? http://plugins.jquery.com/project/jquery-framedialog

0
Tracker1