root
/
bootstrap
mirror of https://github.com/twbs/bootstrap.git
1
0
Fork 0
Code Issues Actions 12 Packages Projects Releases Wiki Activity

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

(Works from breakpoint and down)
This commit is contained in:
gsoti 2019-04-23 17:03:59 +03:00 committed by XhmikosR
parent 053d5d5e93
commit e138decdbb
4 changed files with 187 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
scss/_mixins.scss
View File

@ -26,6 +26,7 @@
@import "mixins/pagination"; @import "mixins/pagination";
@import "mixins/lists"; @import "mixins/lists";
@import "mixins/list-group"; @import "mixins/list-group";
@import "mixins/modal";
@import "mixins/forms"; @import "mixins/forms";
@import "mixins/table-row"; @import "mixins/table-row";

16
scss/_modal.scss
View File

@ -85,6 +85,7 @@
flex-direction: column; flex-direction: column;
width: 100%; // Ensure `.modal-content` extends the full width of the parent `.modal-dialog` width: 100%; // Ensure `.modal-content` extends the full width of the parent `.modal-dialog`
// counteract the pointer-events: none; in the .modal-dialog // counteract the pointer-events: none; in the .modal-dialog
height: 100%;
color: $modal-content-color; color: $modal-content-color;
pointer-events: auto; pointer-events: auto;
background-color: $modal-content-bg; background-color: $modal-content-bg;
@ -142,6 +143,7 @@
// when there should be a fixed height on `.modal-dialog`. // when there should be a fixed height on `.modal-dialog`.
flex: 1 1 auto; flex: 1 1 auto;
padding: $modal-inner-padding; padding: $modal-inner-padding;
overflow-y: auto;
} }
// Footer (for actions) // Footer (for actions)
@ -204,3 +206,17 @@
@include media-breakpoint-up(xl) { @include media-breakpoint-up(xl) {
.modal-xl { max-width: $modal-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();
}
}
}

14
scss/mixins/_modal.scss Normal file
View File

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

156
site/content/docs/4.3/components/modal.md
View File

@ -678,6 +678,162 @@ Our default modal without modifier class constitutes the "medium" size modal.
</div> </div>
</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 ## 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. 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.