So machen Sie Twitter Bootstrap modal Vollbild

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

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

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%;
}

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%;
}

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;
  }

}

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.

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">

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;
}

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>

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%;
}

.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;
}

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>