Add Full-Screen size to Modal and Responsive variations for breakpoints

(Works from breakpoint and down)

diff --git a/scss/_mixins.scss b/scss/_mixins.scss
index 5a04655d5471567a223f5dfa80945516fd5744bf..9ace99c3227c7c81b73f7297062a9d795f5de7c0 100644 (file)
--- a/scss/_mixins.scss
+++ b/scss/_mixins.scss
@@ -26,6 +26,7 @@
 @import "mixins/pagination";
 @import "mixins/lists";
 @import "mixins/list-group";
+@import "mixins/modal";
 @import "mixins/forms";
 @import "mixins/table-row";
 

diff --git a/scss/_modal.scss b/scss/_modal.scss
index ed6ab4eb1f9e206907094306369668b9212927e3..b91848d8bfbd3880d8db10f46bb457a56cd7bd3e 100644 (file)
--- a/scss/_modal.scss
+++ b/scss/_modal.scss
@@ -85,6 +85,7 @@
   flex-direction: column;
   width: 100%; // Ensure `.modal-content` extends the full width of the parent `.modal-dialog`
   // counteract the pointer-events: none; in the .modal-dialog
+  height: 100%;
   color: $modal-content-color;
   pointer-events: auto;
   background-color: $modal-content-bg;
@@ -142,6 +143,7 @@
   // when there should be a fixed height on `.modal-dialog`.
   flex: 1 1 auto;
   padding: $modal-inner-padding;
+  overflow-y: auto;
 }
 
 // Footer (for actions)
@@ -204,3 +206,17 @@
 @include media-breakpoint-up(xl) {
   .modal-xl { max-width: $modal-xl; }
 }
+
+.modal-fullscreen {
+  @include modalFullscreen();
+}
+
+@each $breakpoint in map-keys($grid-breakpoints) {
+  @include media-breakpoint-down($breakpoint) {
+    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+    .modal-fullscreen#{$infix}-down {
+      @include modalFullscreen();
+    }
+  }
+}

diff --git a/scss/mixins/_modal.scss b/scss/mixins/_modal.scss
new file mode 100644 (file)
index 0000000..061fb63
--- /dev/null
+++ b/scss/mixins/_modal.scss
@@ -0,0 +1,14 @@
+// Modal
+
+// Maximize modal to cover viewport
+@mixin modalFullscreen {
+  width: 100vw;
+  max-width: none;
+  height: 100vh;
+  margin: 0;
+
+  .modal-content {
+    border: 0;
+    @include border-radius(0);
+  }
+}

diff --git a/site/content/docs/4.3/components/modal.md b/site/content/docs/4.3/components/modal.md
index 6789ccc7c954cb9b583cb7a8089e3a997e30b227..a5732c6a0ddbd6741acfc50d722335a0811eb1b2 100644 (file)
--- a/site/content/docs/4.3/components/modal.md
+++ b/site/content/docs/4.3/components/modal.md
@@ -678,6 +678,162 @@ Our default modal without modifier class constitutes the "medium" size modal.
   </div>
 </div>
 
+## Fullscreen Modal
+
+Another override is the option to pop up a modal that covers the user viewport, available via modifier classes that are placed on a `.modal-dialog`.
+
+<table class="table">
+  <thead>
+    <tr>
+      <th>Class</th>
+      <th>Availability</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td><code>.modal-fullscreen</code></td>
+      <td>Always</td>
+    </tr>
+    <tr>
+      <td><code>.modal-fullscreen-xl-down</code></td>
+      <td><code>Below 1200px</code></td>
+    </tr>
+    <tr>
+      <td><code>.modal-fullscreen-lg-down</code></td>
+      <td><code>Below 992px</code></td>
+    </tr>
+    <tr>
+      <td><code>.modal-fullscreen-md-down</code></td>
+      <td><code>Below 768px</code></td>
+    </tr>
+    <tr>
+      <td><code>.modal-fullscreen-sm-down</code></td>
+      <td><code>Below 576px</code></td>
+    </tr>
+  </tbody>
+</table>
+
+<div class="bd-example">
+  <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-fullscreen">Full screen</button>
+  <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-fullscreen-xl-down">Full screen below xl</button>
+  <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-fullscreen-lg-down">Full screen below lg</button>
+  <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-fullscreen-md-down">Full screen below md</button>
+  <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-fullscreen-sm-down">Full screen below sm</button>
+</div>
+
+{{< highlight html >}}
+<!-- Full screen modal -->
+<button id="toggleFullScreenBtn" type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-fullscreen">Full screen modal</button>
+
+<div class="modal fade bd-example-modal-fullscreen" tabindex="-1" role="dialog" aria-labelledby="toggleFullScreenBtn" aria-hidden="true">
+  <div class="modal-dialog modal-xl-fullscreen">
+    <div class="modal-content">
+      ...
+    </div>
+  </div>
+</div>
+{{< /highlight >}}
+
+<div class="modal fade bd-example-modal-fullscreen" tabindex="-1" role="dialog" aria-labelledby="myFullModalLabel" aria-hidden="true">
+  <div class="modal-dialog modal-fullscreen">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title h4" id="myFullModalLabel">Full screen modal</h5>
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+          <span aria-hidden="true">&times;</span>
+        </button>
+      </div>
+      <div class="modal-body">
+        <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
+        <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
+        <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
+        <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
+        <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
+        <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
+        <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
+        <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
+        <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
+        <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
+        <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
+        <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
+        <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
+        <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
+        <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
+        <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
+        <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
+        <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="modal fade bd-example-modal-fullscreen-xl-down" tabindex="-1" role="dialog" aria-labelledby="myFullModalLabelXl" aria-hidden="true">
+  <div class="modal-dialog modal-fullscreen-xl-down" role="document">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title h4" id="myFullModalLabelXl">Full screen below xl</h5>
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+          <span aria-hidden="true">&times;</span>
+        </button>
+      </div>
+      <div class="modal-body">
+        ...
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="modal fade bd-example-modal-fullscreen-lg-down" tabindex="-1" role="dialog" aria-labelledby="myFullModalLabelLg" aria-hidden="true">
+  <div class="modal-dialog modal-fullscreen-lg-down" role="document">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title h4" id="myFullModalLabelLg">Full screen below lg</h5>
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+          <span aria-hidden="true">&times;</span>
+        </button>
+      </div>
+      <div class="modal-body">
+        ...
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="modal fade bd-example-modal-fullscreen-md-down" tabindex="-1" role="dialog" aria-labelledby="myFullModalLabelMd" aria-hidden="true">
+  <div class="modal-dialog modal-fullscreen-md-down" role="document">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title h4" id="myFullModalLabelMd">Full screen below md</h5>
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+          <span aria-hidden="true">&times;</span>
+        </button>
+      </div>
+      <div class="modal-body">
+        ...
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="modal fade bd-example-modal-fullscreen-sm-down" tabindex="-1" role="dialog" aria-labelledby="myFullModalLabelSm" aria-hidden="true">
+  <div class="modal-dialog modal-fullscreen-sm-down" role="document">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title h4" id="myFullModalLabelSm">Full screen below sm</h5>
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+          <span aria-hidden="true">&times;</span>
+        </button>
+      </div>
+      <div class="modal-body">
+        ...
+      </div>
+    </div>
+  </div>
+</div>
+
 ## Usage
 
 The modal plugin toggles your hidden content on demand, via data attributes or JavaScript. It also adds `.modal-open` to the `<body>` to override default scrolling behavior and generates a `.modal-backdrop` to provide a click area for dismissing shown modals when clicking outside the modal.