So machen Sie Twitter Bootstrap modal Vollbild

160
<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.

Hrishikesh Sardar
quelle

Antworten:

280

Ich habe dies in Bootstrap 3 mit dem folgenden Code erreicht:

.modal-dialog {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.modal-content {
  height: auto;
  min-height: 100%;
  border-radius: 0;
}

Wenn Sie Fragen zu Abstands- / Auffüllproblemen haben, versuchen Sie im Allgemeinen, mit der rechten Maustaste (oder cmd + Klicken auf Mac) auf das Element zu klicken und wählen Sie "Element überprüfen" in Chrome oder "Element mit Firebug überprüfen" in Firefox. Versuchen Sie, verschiedene HTML-Elemente im Bereich "Elemente" auszuwählen und das CSS rechts in Echtzeit zu bearbeiten, bis Sie den gewünschten Abstand / Abstand erhalten.

Hier ist eine Live-Demo

Hier ist ein Link zur Geige

Chris J.
quelle
12
Ich würde auch hinzufügen margin: 0zu .modal-dialog.
Harrison4
10
Übrigens: .modal-contentDie Höhe bricht ab, wenn der Inhalt unten überläuft und nach unten gescrollt wird. Es sollte seinmin-height: 100%; height: auto;
Yanick Rochon
3
Wenn Sie für eine mobile App entwerfen, können Sie Chris 'CSS in eine Medienabfrage einfügen, um eine normale Modalbreite für breitere Bildschirme zu erhalten @media (max-width: 768px) {...}
Nicolas Connault
Sie können auch .modal {padding: ... px} hinzufügen, wenn Sie "fast" Vollbild-Modal
benötigen
8
.modal-dialogbraucht auch max-width: 100%;für Bootstrap 4
Anand Rockzz
25

Bei 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 ...

.modal-dialog {
  width: 98%;
  height: 92%;
  padding: 0;
}

.modal-content {
  height: 99%;
}
Esteban
quelle
1
Eine korrektere Antwort, die das Gefühl eines Modells mit abgerundeten Ecken beibehält. Die akzeptierte Antwort zeigt eine Überlagerungsebene anstelle von Modal
Clain Dsilva,
Wenn das Modal den gesamten Bildschirm einnimmt, würde es schrecklich aussehen (IMHO), wenn Sie runde Ecken haben.
Dementic
16

Für Bootstrap 4 muss ich eine Medienabfrage mit maximaler Breite hinzufügen: keine

@media (min-width: 576px) {
  .modal-dialog { max-width: none; }
}

.modal-dialog {
  width: 98%;
  height: 92%;
  padding: 0;
}

.modal-content {
  height: 99%;
}
A. Morel
quelle
15

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:

.modal {
  padding: 0 !important; // override inline padding-right added from js
}
.modal .modal-dialog {
  width: 100%;
  max-width: none;
  height: 100%;
  margin: 0;
}
.modal .modal-content {
  height: 100%;
  border: 0;
  border-radius: 0;
}
.modal .modal-body {
  overflow-y: auto;
}

Durch Einfügen des folgenden scss-Codes werden die folgenden Klassen generiert, die dem .modalElement hinzugefügt werden müssen :

+---------------+---------+---------+---------+---------+---------+
|               |   xs    |   sm    |   md    |   lg    |   xl    | 
|               | <576px  | 576px  | 768px  | 992px  | 1200px |
+---------------+---------+---------+---------+---------+---------+
|.fullscreen    |  100%   | default | default | default | default | 
+---------------+---------+---------+---------+---------+---------+
|.fullscreen-sm |  100%   |  100%   | default | default | default | 
+---------------+---------+---------+---------+---------+---------+
|.fullscreen-md |  100%   |  100%   |  100%   | default | default |
+---------------+---------+---------+---------+---------+---------+
|.fullscreen-lg |  100%   |  100%   |  100%   |  100%   | default |
+---------------+---------+---------+---------+---------+---------+
|.fullscreen-xl |  100%   |  100%   |  100%   |  100%   |  100%   |
+---------------+---------+---------+---------+---------+---------+

Der scss-Code lautet:

@mixin modal-fullscreen() {
  padding: 0 !important; // override inline padding-right added from js

  .modal-dialog {
    width: 100%;
    max-width: none;
    height: 100%;
    margin: 0;
  }

  .modal-content {
    height: 100%;
    border: 0;
    border-radius: 0;
  }

  .modal-body {
    overflow-y: auto;
  }

}

@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-down($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

    .modal-fullscreen#{$infix} {
      @include modal-fullscreen();
    }
  }
}

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:

.modal {
  padding: 0 !important; // override inline padding-right added from js
}

.modal .modal-dialog {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.modal .modal-content {
  height: auto;
  min-height: 100%;
  border: 0 none;
  border-radius: 0;
  box-shadow: none;
}

Wenn Sie reaktionsschnelle Vollbildmodale verwenden möchten, verwenden Sie die folgenden Klassen, die dem .modalElement hinzugefügt werden müssen :

  • .modal-fullscreen-md-down- Das Modal ist Vollbild für Bildschirme kleiner als 1200px.
  • .modal-fullscreen-sm-down- Das Modal ist Vollbild für Bildschirme kleiner als 922px.
  • .modal-fullscreen-xs-down- Das Modal ist Vollbild für Bildschirm kleiner als 768px.

Schauen Sie sich den folgenden Code an:

/* Extra small devices (less than 768px) */
@media (max-width: 767px) {
  .modal-fullscreen-xs-down {
    padding: 0 !important;
  }
  .modal-fullscreen-xs-down .modal-dialog {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
  }
  .modal-fullscreen-xs-down .modal-content {
    height: auto;
    min-height: 100%;
    border: 0 none;
    border-radius: 0;
    box-shadow: none;
  } 
}

/* Small devices (less than 992px) */
@media (max-width: 991px) {
  .modal-fullscreen-sm-down {
    padding: 0 !important;
  }
  .modal-fullscreen-sm-down .modal-dialog {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
  }
  .modal-fullscreen-sm-down .modal-content {
    height: auto;
    min-height: 100%;
    border: 0 none;
    border-radius: 0;
    box-shadow: none;
  }
}

/* Medium devices (less than 1200px) */
@media (max-width: 1199px) {
  .modal-fullscreen-md-down {
    padding: 0 !important;
  }
  .modal-fullscreen-md-down .modal-dialog {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
  }
  .modal-fullscreen-md-down .modal-content {
    height: auto;
    min-height: 100%;
    border: 0 none;
    border-radius: 0;
    box-shadow: none;
  }
}

Die Demo ist auf Codepen verfügbar: https://codepen.io/andreivictor/full/KXNdoO .


Wer Sass als Präprozessor verwendet, kann das folgende Mixin nutzen:

@mixin modal-fullscreen() {
  padding: 0 !important; // override inline padding-right added from js

  .modal-dialog {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
  }

  .modal-content {
    height: auto;
    min-height: 100%;
    border: 0 none;
    border-radius: 0;
    box-shadow: none;
  }

}
andreivictor
quelle
11

Die folgende Klasse erstellt in Bootstrap ein Vollbild-Modal:

.full-screen {
    width: 100%;
    height: 100%;
    margin: 0;
    top: 0;
    left: 0;
}

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.

Micjamking
quelle
Was ist Vollbild? Ich habe das CSS in #myModal aufgenommen, es funktionierte für die Breite, aber nicht für die Höhe.
Hrishikesh Sardar
.fullscreenist 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.
Micjamking
Um die Höhe zu erhöhen, müssen Sie die Höhe am Modellkörper hinzufügen, nicht am #myModal.
QasimRamzan
9

für Bootstrap 4

Klassen hinzufügen:

.full_modal-dialog {
  width: 98% !important;
  height: 92% !important;
  min-width: 98% !important;
  min-height: 92% !important;
  max-width: 98% !important;
  max-height: 92% !important;
  padding: 0 !important;
}

.full_modal-content {
  height: 99% !important;
  min-height: 99% !important;
  max-height: 99% !important;
}

und in HTML:

<div role="document" class="modal-dialog full_modal-dialog">
    <div class="modal-content full_modal-content">
Vlad
quelle
7

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:

.modal-dialog {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
}
.modal-content {
    height: 100%;
    min-height: 100%;
    height: auto;
    border-radius: 0;
}
kkarli
quelle
2

Sie müssen Ihre DIV-Tags wie folgt einstellen.

Weitere Details finden Sie unter> http://thedeveloperblog.com/bootstrap-modal-with-full-size-and-scrolling

</style>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
   More Details
</button>
</br>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-content">
        <div class="container">;
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h3 class="modal-title" id="myModalLabel">Modal Title</h3>
          </div>
              <div class="modal-body" >
                Your modal text 
              </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </div>
        </div>
    </div>                                      
</div>
BenW
quelle
-1

Meine Variation der Lösung: (scss)

  .modal {
        .modal-dialog.modal-fs {
            width: 100%;
            margin: 0;
            box-shadow: none;
            height: 100%;
            .modal-content {
                border: none;
                border-radius: 0;
                box-shadow: none;
                box-shadow: none;
                height: 100%;
            }
        }
    }

(CSS)

.modal .modal-dialog.modal-fs {
  width: 100%;
  margin: 0;
  box-shadow: none;
  height: 100%;
}
.modal .modal-dialog.modal-fs .modal-content {
  border: none;
  border-radius: 0;
  box-shadow: none;
  box-shadow: none;
  height: 100%;
}
Dementic
quelle
-1
.modal.in .modal-dialog {
 width:100% !important; 
 min-height: 100%;
 margin: 0 0 0 0 !important;
 bottom: 0px !important;
 top: 0px;
}


.modal-content {
    border:0px solid rgba(0,0,0,.2) !important;
    border-radius: 0px !important;
    -webkit-box-shadow: 0 0px 0px rgba(0,0,0,.5) !important;
    box-shadow: 0 3px 9px rgba(0,0,0,.5) !important;
    height: auto;
    min-height: 100%;
}

.modal-dialog {
 position: fixed !important;
 margin:0px !important;
}

.bootstrap-dialog .modal-header {
    border-top-left-radius: 0px !important; 
    border-top-right-radius: 0px !important;
}


@media (min-width: 768px)
.modal-dialog {
    width: 100% !important;
    margin: 0 !important;
}
Alireza Pars
quelle
2
Versuchen Sie klarer zu erklären, warum dies eine Antwort auf die Frage ist.
Jeroen Heier
-1

Benutze das:

.modal-full {
    min-width: 100%;
    margin: 0;
}

.modal-full .modal-content {
    min-height: 100vh;
}

und so:

<div id="myModal" class="modal" role="dialog">
    <div class="modal-dialog modal-full">
        <!-- Modal content-->
        <div class="modal-content ">
            <div class="modal-header ">                    
                <button type="button" class="close" data-dismiss="modal">&times; 
                </button>
                <h4 class="modal-title">hi</h4>
            </div>
            <div class="modal-body">
                <p>Some text in the modal.</p>
            </div>
        </div>

    </div>
</div>
hojjat.mi
quelle