diff options
-rw-r--r-- | docs/4.0/components/modal.md | 58 | ||||
-rw-r--r-- | scss/_modal.scss | 15 |
2 files changed, 73 insertions, 0 deletions
diff --git a/docs/4.0/components/modal.md b/docs/4.0/components/modal.md index c4191b83d1..b9ebc4ad4b 100644 --- a/docs/4.0/components/modal.md +++ b/docs/4.0/components/modal.md @@ -208,6 +208,64 @@ When modals become too long for the user's viewport or device, they scroll indep </div> {% endhighlight %} +### Vertically centered + +Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal. **Do not use this with long modals**—it will overflow the viewport and potentially hide parts of your modal. + +<div id="exampleModalCenter" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true"> + <div class="modal-dialog modal-dialog-centered" role="document"> + <div class="modal-content"> + <div class="modal-header"> + <h5 class="modal-title" id="exampleModalCenterTitle">Modal title</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> + </div> + <div class="modal-footer"> + <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> + <button type="button" class="btn btn-primary">Save changes</button> + </div> + </div> + </div> +</div> + +<div class="bd-example"> + <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter"> + Launch demo modal + </button> +</div> + +{% highlight html %} +<!-- Button trigger modal --> +<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter"> + Launch demo modal +</button> + +<!-- Modal --> +<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true"> + <div class="modal-dialog" role="document"> + <div class="modal-content"> + <div class="modal-header"> + <h5 class="modal-title" id="exampleModalLongTitle">Modal title</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 class="modal-footer"> + <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> + <button type="button" class="btn btn-primary">Save changes</button> + </div> + </div> + </div> +</div> +{% endhighlight %} + ### Tooltips and popovers [Tooltips]({{ site.baseurl }}/docs/{{ site.docs_version }}/components/tooltips/) and [popovers]({{ site.baseurl }}/docs/{{ site.docs_version }}/components/popovers/) can be placed within modals as needed. When modals are closed, any tooltips and popovers within are also automatically dismissed. diff --git a/scss/_modal.scss b/scss/_modal.scss index 5fabc83f46..bd4abc7c64 100644 --- a/scss/_modal.scss +++ b/scss/_modal.scss @@ -50,11 +50,20 @@ } } +.modal-dialog-centered { + display: flex; + align-items: center; + height: 100%; + margin-top: 0; + margin-bottom: 0; +} + // Actual modal .modal-content { position: relative; display: flex; 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 pointer-events: auto; background-color: $modal-content-bg; @@ -144,11 +153,17 @@ margin: $modal-dialog-margin-y-sm-up auto; } + .modal-dialog-centered { + margin-top: 0; + margin-bottom: 0; + } + .modal-content { @include box-shadow($modal-content-box-shadow-sm-up); } .modal-sm { max-width: $modal-sm; } + } @include media-breakpoint-up(lg) { |