<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-body">
<%= image_tag "Background.jpg" %>
</div>
</div>
Wie erstelle ich ein modales Twitter-Bootstrap-Popup im Vollbildmodus für den obigen Code? Ich habe versucht, mit CSS herumzuspielen, konnte es aber nicht so bekommen, wie ich es wollte. Kann mir bitte jemand dabei helfen.
quelle
margin: 0
zu.modal-dialog
..modal-content
Die Höhe bricht ab, wenn der Inhalt unten überläuft und nach unten gescrollt wird. Es sollte seinmin-height: 100%; height: auto;
.modal-dialog
braucht auchmax-width: 100%;
für Bootstrap 4Bei der gewählten Lösung bleibt der Stil der runden Ecke nicht erhalten. Um die runden Ecken zu erhalten, sollten Sie die Breite und Höhe ein wenig reduzieren und den Randradius 0 entfernen. Außerdem wird die vertikale Bildlaufleiste nicht angezeigt ...
quelle
Für Bootstrap 4 muss ich eine Medienabfrage mit maximaler Breite hinzufügen: keine
quelle
Ich habe eine "reaktionsschnelle" Lösung für Vollbild-Modalitäten entwickelt:
Vollbild-Modalitäten, die nur an bestimmten Haltepunkten aktiviert werden können . Auf diese Weise zeigt das Modal auf breiteren (Desktop-) Bildschirmen "normal" und auf kleineren (Tablet- oder Mobil-) Bildschirmen den Vollbildmodus an , wodurch es sich wie eine native App .
Implementiert für Bootstrap 3 und Bootstrap 4 .
Bootstrap v4
Der folgende generische Code sollte funktionieren:
Durch Einfügen des folgenden scss-Codes werden die folgenden Klassen generiert, die dem
.modal
Element hinzugefügt werden müssen :Der scss-Code lautet:
Demo zu Codepen: https://codepen.io/andreivictor/full/MWYNPBV/
Bootstrap v3
Basierend auf früheren Antworten zu diesem Thema (@Chris J, @kkarli) sollte der folgende generische Code funktionieren:
Wenn Sie reaktionsschnelle Vollbildmodale verwenden möchten, verwenden Sie die folgenden Klassen, die dem
.modal
Element hinzugefügt werden müssen :.modal-fullscreen-md-down
- Das Modal ist Vollbild für Bildschirme kleiner als1200px
..modal-fullscreen-sm-down
- Das Modal ist Vollbild für Bildschirme kleiner als922px
..modal-fullscreen-xs-down
- Das Modal ist Vollbild für Bildschirm kleiner als768px
.Schauen Sie sich den folgenden Code an:
Die Demo ist auf Codepen verfügbar: https://codepen.io/andreivictor/full/KXNdoO .
Wer Sass als Präprozessor verwendet, kann das folgende Mixin nutzen:
quelle
Die folgende Klasse erstellt in Bootstrap ein Vollbild-Modal:
Ich bin mir nicht sicher, wie der innere Inhalt Ihres Modals strukturiert ist. Dies kann sich je nach dem damit verbundenen CSS auf die Gesamthöhe auswirken.
quelle
.fullscreen
ist eine Klasse, die ich erstellt habe, um das Problem zu lösen. Sie ist nicht in Bootstrap enthalten. Können Sie ein Beispiel Ihres Codes auf JSFiddle oder CodePen veröffentlichen ? Ich kann dir nicht helfen, ohne deinen Code zu sehen.für Bootstrap 4
Klassen hinzufügen:
und in HTML:
quelle
Das Snippet von @Chris J hatte einige Probleme mit Rändern und Überlauf. Die vorgeschlagenen Änderungen von @YanickRochon und @Joana, basierend auf dem Geigen von @Chris J, finden Sie in der folgenden jsfiddle .
Das ist der CSS-Code, der für mich funktioniert hat:
quelle
Sie müssen Ihre DIV-Tags wie folgt einstellen.
Weitere Details finden Sie unter> http://thedeveloperblog.com/bootstrap-modal-with-full-size-and-scrolling
quelle
Meine Variation der Lösung: (scss)
(CSS)
quelle
quelle
Benutze das:
und so:
quelle