So aktivieren Sie das Scrollen von Inhalten in einem Bootstrap-Modal

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

In Bootstrap 3 müssen Sie die css-Klasse .modal ändern.

vorher (Bootstrap-Standard):

.modal {

    overflow-y: auto;
}

after (nachdem Sie es bearbeitet haben):

.modal {

    overflow-y: scroll;
}

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

UX-Warnung

Wenn Ihr Modal so viel enthält, dass ein Bildlauf erforderlich ist, fragen Sie sich, ob Sie überhaupt einen Modal verwenden sollten. Die Größe des Bootstrap-Modals ist standardmäßig eine ziemlich gute Einschränkung für die Anzahl der visuellen Informationen. Je nachdem, was Sie erstellen, möchten Sie möglicherweise eine neue Seite oder einen Assistenten auswählen.

Aktuelle Lösung

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

Mit dieser Lösung können Sie auch die Höhe von .modal ändern und den .modal-body den verbleibenden Platz mit einer vertikalen Bildlaufleiste belegen, falls erforderlich.

UPDATE

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

Legen Sie die Höhe für modal-body und nicht für das gesamte Modal fest, um einen perfekten Bildlauf für die modale Überlagerung zu erhalten. Ich verstehe es so:

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

Hier können Sie die Höhe nach Ihren Anforderungen einstellen.

Wenn ich mich recht erinnere, dass Überlauf eingestellt wurde: "Verdeckt auf dem Körper" funktionierte nicht bei allen Browsern, die ich für eine modale Bibliothek testete, die ich für eine mobile Website erstellt hatte. Insbesondere hatte ich Probleme mit dem Scrollen des Körpers zusätzlich zum modalen Scrollen, selbst wenn ich Überlauf auf den Körper lege.

Für meine jetzige Seite habe ich so etwas getan. Es speichert im Wesentlichen nur Ihre aktuelle Bildlaufposition, zusätzlich zu "Überlauf" im Seitenkörper wird "Verdeckt" festgelegt, und stellt die Bildlaufposition wieder her, nachdem der Modal geschlossen wurde. Es gibt eine Bedingung, wenn ein anderer Bootstrap-Modal geöffnet wird, während einer bereits aktiv ist. Ansonsten sollte der Rest des Codes selbsterklärend sein. Wenn der Überlauf: ausgeblendet auf dem Hauptteil nicht verhindert, dass das Fenster für einen bestimmten Browser gescrollt wird, wird dadurch beim Verlassen der ursprüngliche Bildlauf mindestens zurückgesetzt.

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 Sie das nicht mögen, besteht die andere Möglichkeit darin, eine maximale Höhe und einen Überlauf zuzuweisen: auto .modal-body 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: auto für verschiedene Bildschirmgrößen belassen. Sie müssen jedoch sicherstellen, dass die modale Kopfzeile, die Fußzeile und der Textkörper nicht mehr als die Bildschirmgröße ergeben. Ich würde diesen Teil in Ihre Berechnungen einbeziehen.

Wenn Sie Bootstrap Modal mit Skrollr verwenden, wird der Modal nicht mehr scrollbar. 

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

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

weitere Details unter Fügt dem Element in # skrollr-body ein Bildlaufereignis hinzu

So habe ich es mit reinem CSS geschafft, einige Klassen zu überschreiben:

.modal {
  height: 60%;

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

Ich hoffe es hilft dir.

Für Bootstrap 3 müssen Sie auch die .modal-open-Klasse auf body überschreiben.

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

Ich hatte das gleiche Problem und fand einen Fix 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 für mich

Ich habe dieses Problem bei Mobile Safari auf meinem iPhone6

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

Ich habe versucht, minimale Überschreibungen auf Bootstrap 3.2.0 vorzunehmen, und habe folgendes gefunden:

.modal-open {
    position: fixed;
}

.modal {
    overflow-y: auto;
}

Zum Vergleich habe ich unten die zugehörigen Bootstrap-Stile hinzugefügt.

Ausgewählter Extrakt aus Bootstrap/less/modals.less (nicht in Ihrem Fix enthalten):

// 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 konnte dies überwinden, indem ich die Metrik "vh" mit maximaler Höhe für das .modal-body-Element verwendete. 70vh sah für meine Anwendungen richtig aus.

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

Nachdem ich all diese Lösungen verwendet hatte, konnte ich immer noch nicht mit der Maus scrollen.

Also habe ich unten Css Fixes hinzugefügt, damit es funktioniert

.modal-open {
    overflow: hidden;
}

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

pointer-events hinzugefügt: auto; um die Maus scrollbar zu machen.

Bootstrap fügt dem "modal-open"-Tag einen css <body> hinzu, wenn ein Modal geöffnet oder geschlossen wird. Wenn Sie also mehrere Modale öffnen und dann eine beliebige schließen, wird die modal-open-CSS aus dem body-Tag entfernt.

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