diff options
| -rw-r--r-- | scss/_mixins.scss | 1 | ||||
| -rw-r--r-- | scss/_modal.scss | 16 | ||||
| -rw-r--r-- | scss/mixins/_modal.scss | 14 | ||||
| -rw-r--r-- | site/content/docs/4.3/components/modal.md | 156 |
4 files changed, 187 insertions, 0 deletions
diff --git a/scss/_mixins.scss b/scss/_mixins.scss index 5a04655d5..9ace99c32 100644 --- 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 ed6ab4eb1..b91848d8b 100644 --- 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 index 000000000..061fb6320 --- /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 6789ccc7c..a5732c6a0 100644 --- 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">×</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">×</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">×</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">×</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">×</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. |