Wie aktiviere ich das Scrollen von Inhalten innerhalb eines Modals?

Ich versuche, viel Text in eine mit Twitter Bootstrap erstellte modale Box einzufügen, aber ich habe ein Problem: Dieser Inhalt weigert sich zu scrollen.

Ich habe versucht, overflow:scrollund hinzuzufügen overflow-y:scroll, aber ohne Erfolg; Dadurch wird lediglich eine Bildlaufleiste angezeigt, ohne dass das Scrollen aktiviert ist.

Was ist die Ursache dahinter und was kann ich tun?

Ändern Sie in Bootstrap.css das Hintergrundattribut ( position) von Modal von fixednachabsolute

In Bootstrap 3 müssen Sie die cssKlasse ändern.modal

vorher (Bootstrap-Standard):

.modal {

    overflow-y: auto;
}

nach (nachdem Sie es bearbeitet haben):

.modal {

    overflow-y: scroll;
}

Diese Antwort besteht aus zwei Teilen, einer UX-Warnung und einer tatsächlichen Lösung .

UX-Warnung

Wenn Ihr Modal so viel enthält, dass es scrollen muss, fragen Sie sich, ob Sie überhaupt ein Modal verwenden sollten. Die Größe des Bootstrap-Modals ist standardmäßig eine ziemlich gute Einschränkung dafür, wie viele visuelle Informationen passen sollten. Je nachdem, was Sie erstellen, möchten Sie möglicherweise stattdessen eine neue Seite oder einen Assistenten auswählen.

Tatsächliche Lösung

Ist hier: http://jsfiddle.net/ajkochanowicz/YDjsE/2/

Mit dieser Lösung können Sie auch die Höhe von ändern .modalund .modal-bodyden verbleibenden Platz bei Bedarf mit einer vertikalen Bildlaufleiste einnehmen.

AKTUALISIEREN

Beachten Sie, dass in Bootstrap 3 das Modal überarbeitet wurde, um überlaufende Inhalte besser verarbeiten zu können. Sie können das Modal selbst nach oben und unten scrollen, während es unter dem Ansichtsfenster fließt.

Stellen Sie die Höhe für modal-bodyund nicht für das gesamte Modal ein, um einen perfekten Bildlauf bei der Modalüberlagerung zu erhalten. Ich bekomme es so funktionieren:

.MyModal {
    height: 450px;
    overflow-y: auto;
}

Hier können Sie die Höhe nach Ihren Wünschen einstellen.

Wenn ich mich richtig erinnere, funktionierte das Einstellen des Überlaufs: Versteckt auf dem Körper nicht in allen Browsern, die ich für eine modale Bibliothek getestet habe, die ich für eine mobile Site erstellt habe. Insbesondere hatte ich Probleme, das Scrollen des Körpers zusätzlich zum modalen Scrollen zu verhindern, selbst wenn ich einen Überlauf: versteckt auf dem Körper platzierte.

Für meine aktuelle Site habe ich so etwas gemacht. Grundsätzlich wird nur Ihre aktuelle Bildlaufposition gespeichert und "Überlauf" im Seitenkörper auf "ausgeblendet" gesetzt. Anschließend wird die Bildlaufposition nach dem Schließen des Modals wiederhergestellt. Es gibt eine Bedingung, wenn ein anderes Bootstrap-Modal geöffnet wird, während eines bereits aktiv ist. Andernfalls sollte der Rest des Codes selbsterklärend sein. Beachten Sie, dass, wenn der auf dem Körper verborgene Überlauf das Fenster nicht daran hindert, für einen bestimmten Browser zu scrollen, dies zumindest die ursprüngliche Bildlaufposition beim Beenden zurücksetzt.

function bindBootstrapModalEvents() {
    var $body = $('body'),
        curPos = 0,
        isOpened = false,
        isOpenedTwice = false;
    $body.off('shown.bs.modal hidden.bs.modal', '.modal');
    $body.on('shown.bs.modal', '.modal', function () {
        if (isOpened) {
            isOpenedTwice = true;
        } else {
            isOpened = true;
            curPos = $(window).scrollTop();
            $body.css('overflow', 'hidden');
        }
    });
    $body.on('hidden.bs.modal', '.modal', function () {
        if (!isOpenedTwice) {
            $(window).scrollTop(curPos);
            $body.css('overflow', 'visible');
            isOpened = false;
        }
        isOpenedTwice = false;
    });
}

Wenn Ihnen dies nicht gefällt, besteht die andere Option darin, .modal-body eine maximale Höhe und einen Überlauf zuzuweisen: auto wie folgt:

.modal-body {
  max-height:300px;
  overflow:auto;
}

In diesem Fall können Sie die maximale Höhe für verschiedene Bildschirmgrößen konfigurieren und den Überlauf belassen: auto für verschiedene Bildschirmgrößen. Sie müssten jedoch sicherstellen, dass die modale Kopf- und Fußzeile sowie der Textkörper nicht mehr als die Bildschirmgröße ergeben, sodass ich diesen Teil in Ihre Berechnungen einbeziehen würde.

So habe ich es nur mit CSS gemacht, das einige Klassen überschreibt:

.modal {
  height: 60%;

  .modal-body {
    height: 80%;
    overflow-y: scroll;
  }
}

Hoffe es hilft dir.

Wenn Sie das Bootstrap-Modal mit skrollr verwenden, kann das Modal nicht mehr gescrollt werden.

Problem behoben, bei dem die Ausbreitung des Berührungsereignisses gestoppt wurde.

$('#modalFooter').on('touchstart touchmove touchend', function(e) {
    e.stopPropagation();
});

Weitere Details finden Sie unter Bildlaufereignis zum Element in # skrollr-body hinzufügen

Tatsächlich müssen Sie für Bootstrap 3 auch die .modal-open-Klasse für body überschreiben.

    body.modal-open, 
    .modal-open 
    .navbar-fixed-top, 
    .modal-open 
    .navbar-fixed-bottom {
     margin-right: 15px; /*<-- to margin-right: 0px;*/
    }

Ich habe dieses Problem in Mobile Safari auf meinem iPhone6

Bootstrap fügt die Klasse .modal-opendem Body hinzu, wenn ein Modal geöffnet wird.

Ich habe versucht, Bootstrap 3.2.0 nur minimal zu überschreiben, und habe Folgendes gefunden:

.modal-open {
    position: fixed;
}

.modal {
    overflow-y: auto;
}

Zum Vergleich habe ich die zugehörigen Bootstrap-Stile unten aufgeführt.

Ausgewählter Auszug aus bootstrap / less / modals.less (nicht in Ihren Fix aufnehmen):

// Kill the scroll on the body
.modal-open {
  overflow: hidden;
}

// Container that the modal scrolls within
.modal {
  display: none;
  overflow: hidden;
  position: fixed;
  -webkit-overflow-scrolling: touch;
}

.modal-open .modal {
  overflow-x: hidden;
  overflow-y: auto;
}

Verwendete Mobile Safari-Version: User-Agent Mozilla/5.0 (iPhone; CPU iPhone OS 8_1 like Mac OS X) AppleWebKit/600.1.4 (KHTML, like Gecko) Version/8.0 Mobile/12B411 Safari/600.1.4

Ich hatte das gleiche Problem und fand eine Lösung wie folgt:

$('.yourModalClassOr#ID').on('shown.bs.modal', function (e) {
    $(' yourModalClassOr#ID ').css("max-height", $(window).height());
    $(' yourModalClassOr#ID ').css("overflow-y", "scroll");          /*Important*/
    $(' yourModalClassOr#ID ').modal('handleUpdate');

});

100% arbeiten.

.modal-body {
    max-height: 80vh;
    overflow-y: scroll;
}

es funktioniert bei mir

Nachdem ich all diese erwähnten Lösungen verwendet hatte, war ich immer noch nicht in der Lage, mit der Maus zu scrollen. Die Tastatur-Auf / Ab-Taste funktionierte zum Scrollen von Inhalten.

Also habe ich unten CSS-Korrekturen hinzugefügt, damit es funktioniert

.modal-open {
    overflow: hidden;
}

.modal-open .modal {
    overflow-x: hidden;
    overflow-y: auto;
    **pointer-events: auto;**
}

Zeigerereignisse hinzugefügt : auto; um die Maus scrollbar zu machen.

Ich konnte dies überwinden, indem ich die "vh" -Metrik mit maximaler Höhe für das .modal-body-Element verwendete. 70vh sah für meine Zwecke richtig aus.

.modal-body {
   overflow-y: auto;
   max-height: 70vh;
}

Bootstrap fügt "modal-open"dem <body>Tag ein CSS hinzu oder entfernt es , wenn wir ein Modal öffnen oder schließen. Wenn Sie also mehrere Modals öffnen und dann einen beliebigen schließen, wird das Modal-Open-CSS aus dem Body-Tag entfernt.

Der Bildlaufeffekt hängt jedoch von dem in "overflow-y: auto;"definierten Attribut abmodal-open

Lösung 1 : Sie können deklarieren .modal{ overflow-y:auto}oder .modal-open .modal{ overflow-y:auto}wenn Sie weniger als 3 V Bootstrap verwenden (für obere Versionen ist es bereits deklariert).

Bootstrap fügt eine modal-openKlasse hinzu body, um Bildlaufleisten zu entfernen, falls modal angezeigt wird, fügt jedoch keine Klasse hinzu, zu htmlder auch Bildlaufleisten vorhanden sein können. Daher htmlkann manchmal auch die Bildlaufleiste von sichtbar sein. Um sie zu entfernen, müssen Sie modal show / festlegen hide Veranstaltungen und hinzufügen / entfernen overflow:hidden auf html. Hier erfahren Sie, wie das geht.

$('.modal').on('hidden.bs.modal', function () {
   $('html').css('overflow','auto');
}).on('shown.bs.modal', function () {
   $('html').css('overflow','hidden');
});

Lösung 2 : Da Modal über Funktionstasten verfügt, können Sie die Höhe des Modals am besten festlegen oder die Höhe des Modals besser mit der Höhe des Ansichtsfensters wie folgt verbinden.

.modal-body {
     overflow:auto; 
     max-height: 65vh;
}

Bei dieser Methode müssen auch Sie nicht handhaben bodyund htmlBildlaufleisten.

Anmerkung 1 : Browser Unterstützung für vhEinheiten.

Anmerkung 2 : Wie oben vorgeschlagen . Wenn Sie ändern .modal{position:fixed}zu .modal{position:absolute}, aber im Fall Seite mehr Höhe hat als modal Benutzer zu viel scrollen und Modal wird aus Ansichtsfenster verschwinden, das ist gut , nicht für User Experience.