Ich habe folgendes Element:
<div class="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" style="overflow-y: scroll; max-height:85%; margin-top: 50px; margin-bottom:50px;" >
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title"></h3>
</div>
<div class="modal-body"></div>
<div class="modal-footer"></div>
</div>
</div>
</div>
Es zeigt einen modalen Dialog wie diesen. Im Grunde genommen wird die Bildlaufleiste um den gesamten Bereich herum platziert modal-dialog
und nicht modal-body
der Inhalt, den ich anzeigen möchte .
Das Bild sieht ungefähr so aus:
Wie bekomme ich nur eine Bildlaufleiste modal-body
?
Ich habe versucht, zuzuweisen style="overflow-y: scroll; max-height:85%; margin-top: 50px; margin-bottom:50px;"
, modal-body
aber es hat nicht funktioniert.
css
twitter-bootstrap
Subodh Nijsure
quelle
quelle
Antworten:
Sie haben das einstellen
height
von der.modal-body
in und geben Sie esoverflow-y: auto
. Setzen Sie auch den.modal-dialog
Überlaufwert auf zurückinitial
.Siehe das Arbeitsprobe:
http://www.bootply.com/T0yF2ZNTUd
quelle
initial
Schlüsselwort von CSS für Internet Explorer nicht funktioniert, obwohl es für Edge funktioniert.max-height: 80vh;
nur 80% der gesamten Ansichtsfensterhöhe und nur für die maximale Höhe, nicht wenn dies der Fall ist ist ein kleines PopupWenn Sie nur IE 9 oder höher unterstützen, können Sie dieses CSS verwenden, das problemlos auf die Größe des Fensters skaliert werden kann. Abhängig von der Höhe Ihrer Kopf- oder Fußzeile müssen Sie möglicherweise die "200px" anpassen.
quelle
Problem mit Mähdrescherlösung @carlos calla und @jonathan marston gelöst.
quelle
Für Bootstrap-Versionen> = 4.3
Bootstrap 4.3 hat Modals eine neue integrierte Bildlauffunktion hinzugefügt. Dadurch wird nur der Modal-Body- Inhalt gescrollt, wenn die Größe des Inhalts andernfalls die Seite scrollen würde. Um es zu verwenden, fügen Sie einfach die Klasse Modal-Dialog-Scrollable zu demselben Div hinzu, das die Modal-Dialog- Klasse hat.
Hier ist ein Beispiel:
quelle
Hinzu kommt die großartige Antwort von Carlos Calla .
Die Höhe von .modal-body muss festgelegt werden, ABER Sie können Medienabfragen verwenden, um sicherzustellen, dass sie für die Bildschirmgröße geeignet sind.
quelle
Optional : Wenn Sie nicht möchten, dass das Modal die Fensterhöhe überschreitet und eine Bildlaufleiste im .modal-Body verwendet, können Sie diese reaktionsfähige Lösung verwenden. Eine funktionierende Demo finden Sie hier: http://codepen.io/dimbslmh/full/mKfCc/
quelle
Ich weiß, dass dies ein altes Thema ist, aber dies kann jemand anderem helfen.
Ich konnte den Körper scrollen lassen, indem ich die Position des Modal-Dialog-Elements festlegte. Und da ich nie die genaue Höhe des Browserfensters erfahren würde, nahm ich die Informationen, bei denen ich mir sicher war, die Höhe der Kopf- und Fußzeile. Ich konnte dann die oberen und unteren Ränder des Modalkörperelements an diese Höhen anpassen. Dies führte dann zu dem Ergebnis, das ich suchte. Ich warf eine Geige zusammen, um meine Arbeit zu zeigen.
Wenn Sie einen Vollbilddialog wünschen, deaktivieren Sie einfach die Breite: auto; im Abschnitt .modal-dialog.full-screen.
https://jsfiddle.net/lot224/znrktLej/
Und hier ist das CSS, mit dem ich den Bootstrap-Dialog geändert habe.
quelle
Oder einfacher, Sie können zuerst zwischen Ihre Tags und dann in die CSS-Klasse setzen.
quelle
Verwenden Sie
max-height
mitvh
als Einheit auf demmodal-body
oder einem Wrapper Div innerhalb desmodal-body
. Dadurch wird die Höhe von geändertmodal-body
oder das Wrapping-Div (in diesem Beispiel) automatisch geändert, wenn ein Benutzer die Größe des Fensters ändert.vh
ist die Längeneinheit, die 1% der Ansichtsfenstergröße für die Ansichtsfensterhöhe darstellt.Browserkompatibilitätstabelle für
vh
Gerät.Beispiel: https://jsfiddle.net/q3xwr53f/
quelle
Was für mich funktioniert hat, ist die Einstellung der Höhe auf 100%, wenn der Überlauf automatisch aktiviert ist. Ich hoffe, dies wird helfen
quelle
Eine einfache js-Lösung, um die modale Höhe proportional zur Körpergröße einzustellen:
Körpergröße muss 100% betragen:
Ich habe die modale Körpergröße auf 80% des Körpers eingestellt, dies kann natürlich angepasst werden.
Ich hoffe es hilft.
quelle
In der neuesten Bootstrap-Version gibt es eine Klasse, die den modalen Körper scrollbar macht.
.modal-dialog-scrollbar zu .modal-dialog .
Modaler Bootstrap-Link für scrollbaren Inhalt des Modalkörpers
quelle