Twitter Bootstrap scrollbar modal

Ich verwende Twitter Bootstrap für ein Projekt, an dem ich arbeite.

Ich habe ein modales Fenster mit einer etwas längeren Form und es hat mir nicht gefallen, dass das Modal nicht gescrollt hat, wenn das Fenster zu klein wurde (wenn es einfach von meiner Seite verschwunden ist, die nicht scrollbar ist).

Um dies zu beheben, habe ich das folgende CSS verwendet

.modal {
    overflow-y:auto;
    max-height:90%;
    margin-top:-45%;
}

Dies funktioniert genau so, wie ich es in Chrome möchte (das heißt, das Formular ist in voller Größe, wenn das Fenster groß genug ist, aber wenn das Fenster verkleinert wird, verkleinert sich das Modal und wird scrollbar). Das Problem ist, dass im IE das Modal nicht auf dem Bildschirm angezeigt wird. Hat jemand eine bessere Lösung für dieses Problem?

Mein Beispiel finden Sie unter tinyhousemap.com (klicken Sie im Navigationsfenster auf "Eintrag zur Karte hinzufügen", damit das Modal angezeigt wird).

Vielen Dank

Wie wäre es mit der folgenden Lösung? Es hat bei mir funktioniert. Versuche dies:

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

Einzelheiten:

1. entfernen overflow-y: auto;oder overflow: auto;aus der .modal-Klasse (wichtig)
2. max-height: 400px;aus der .modalKlasse entfernen (wichtig)
3. Hinzufügen max-height: 400px;zu .modal .modal-body (oder was auch immer, kann 420pxoder weniger sein, würde aber nicht mehr als gehen 450px)
4. Hinzufügen overflow-y: auto; zu.modal .modal-body

Fertig, nur der Körper wird scrollen.

Ich habe eine winzige Lösung nur mit jQuery gemacht.

Zuerst müssen Sie eine zusätzliche Klasse zu Ihrer <div class="modal-body">"ativa-scroll" hinzufügen, damit sie ungefähr so ​​wird:

<div class="modal-body ativa-scroll">

Fügen Sie jetzt einfach diesen Code auf Ihre Seite in der Nähe Ihres JS-Ladevorgangs ein:

<script type="text/javascript">
  $(document).ready(ajustamodal);
  $(window).resize(ajustamodal);
  function ajustamodal() {
    var altura = $(window).height() - 155; //value corresponding to the modal heading + footer
    $(".ativa-scroll").css({"height":altura,"overflow-y":"auto"});
  }
</script>

Ich arbeite perfekt für mich, auch reaktionsschnell! :) :)

/* Important part */
.modal-dialog{
    overflow-y: initial !important
}
.modal-body{
    max-height: calc(100vh - 200px);
    overflow-y: auto;
}

Dies funktioniert für Bootstrap 3 ohne JS-Code und reagiert.

Quelle

Versuchen Sie, Bootstraps zu überschreiben:

 .modal {
position: fixed;

Mit:

.modal {
position: absolute;

Es hat bei mir funktioniert.

Ich habe auch hinzugefügt

.modal { position: absolute; }

zum Stylesheet, damit der Dialog scrollen kann. Wenn der Benutzer jedoch zum Ende einer langen Seite gewechselt ist, kann das Modal am oberen Rand des sichtbaren Bereichs ausgeblendet werden.

Ich verstehe, dass dies in Bootstrap 3 kein Problem mehr ist, aber als ich nach einer relativ schnellen Lösung suchte, bis wir ein Upgrade durchgeführt haben, endete ich mit dem oben genannten Plus und rief Folgendes auf, bevor ich das Modal öffnete

$('.modal').css('top', $(document).scrollTop() + 50);

Scheint glücklich zu sein in FireFox, Chrome, IE10 8 & 7 (die Browser, die ich zur Hand hatte)

Ihr Modal wird in Firefox versteckt, und das liegt an der negativen Randdeklaration, die Sie in Ihrem allgemeinen Stylesheet haben:

.modal {
    margin-top: -45%; /* remove this */
    max-height: 90%;
    overflow-y: auto;
}

Entfernen Sie den negativen Rand und alles funktioniert gut.

Bei Verwendung .modal {overflow-y: auto;}wird eine zusätzliche Bildlaufleiste rechts auf der Seite erstellt, wenn der Text bereits übergelaufen ist.

Die Problemumgehung besteht darin, den Überlauf vorübergehend aus dem Body- Tag zu entfernen und den modalen Überlauf-y auf auto zu setzen .

Beispiel:

$('.myModalSelector').on('show.bs.modal', function () {

        // Store initial body overflow value
        _initial_body_overflow = $('body').css('overflow');

        // Let modal be scrollable
        $(this).css('overflow-y', 'auto');
        $('body').css('overflow', 'hidden');


    }).on('hide.bs.modal', function () {

        // Reverse previous initialization
        $(this).css('overflow-y', 'hidden');
        $('body').css('overflow', _initial_body_overflow);
});

Das Problem mit der CSS-Lösung von @ grenoult (die meistens funktioniert) besteht darin, dass sie vollständig reagiert und mobil ist, wenn die Tastatur angezeigt wird (dh wenn sie auf eine Eingabe im modalen Dialogfeld klicken), die Bildschirmgröße sich ändert und die modalen Dialogfelder Wenn sich die Größe ändert, kann die Eingabe, auf die sie gerade geklickt haben, ausgeblendet werden, sodass sie nicht sehen können, was sie eingeben.

Die bessere Lösung für mich war, jquery wie folgt zu verwenden:

$(".modal-body").css({ "max-height" : $(window).height() - 212, "overflow-y" : "auto" });

Es reagiert nicht auf Änderungen der Fenstergröße, aber das kommt sowieso nicht so oft vor.

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. Stellen Sie dann den Überlauf-y auf auto ein, damit nur bei Bedarf gescrollt wird.

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

Nichts davon funktioniert wie erwartet. Der richtige Weg ist, die Position zu ändern: fest auf Position: absolut für die .modal-Klasse