diff options
| author | Martijn Cuppens <[email protected]> | 2018-08-13 09:00:53 +0200 |
|---|---|---|
| committer | XhmikosR <[email protected]> | 2018-08-13 10:00:53 +0300 |
| commit | 57661dff6d444ac50bcb685425a704544bb653d9 (patch) | |
| tree | 4b2e9dcf5732694c4f5e20d10d234717e49c8435 | |
| parent | c0b40745e0bc777fa9a435070f7f08442a248b87 (diff) | |
| download | bootstrap-57661dff6d444ac50bcb685425a704544bb653d9.tar.xz bootstrap-57661dff6d444ac50bcb685425a704544bb653d9.zip | |
Tweak modal transform (#27005)
| -rw-r--r-- | scss/_modal.scss | 4 | ||||
| -rw-r--r-- | scss/_variables.scss | 2 | ||||
| -rw-r--r-- | site/docs/4.1/components/modal.md | 6 |
3 files changed, 10 insertions, 2 deletions
diff --git a/scss/_modal.scss b/scss/_modal.scss index 5eadbf5b8..df8da68ff 100644 --- a/scss/_modal.scss +++ b/scss/_modal.scss @@ -43,10 +43,10 @@ // When fading in the modal, animate it to slide down .modal.fade & { @include transition($modal-transition); - transform: translate(0, -25%); + transform: $modal-fade-transform; } .modal.show & { - transform: translate(0, 0); + transform: $modal-show-transform; } } diff --git a/scss/_variables.scss b/scss/_variables.scss index 8ac3bc583..be13b5647 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -831,6 +831,8 @@ $modal-lg: 800px !default; $modal-md: 500px !default; $modal-sm: 300px !default; +$modal-fade-transform: translate(0, -50px) !default; +$modal-show-transform: none !default; $modal-transition: transform .3s ease-out !default; diff --git a/site/docs/4.1/components/modal.md b/site/docs/4.1/components/modal.md index ac9bf18e7..2da7d8f3c 100644 --- a/site/docs/4.1/components/modal.md +++ b/site/docs/4.1/components/modal.md @@ -448,6 +448,12 @@ $('#exampleModal').on('show.bs.modal', function (event) { }) {% endhighlight %} +### Change animation + +The `$modal-fade-transform` variable determines the transform state of `.modal-dialog` before the modal fade-in animation, the `$modal-show-transform` variable determines the transform of `.modal-dialog` at the end of the modal fade-in animation. + +If you want for example a zoom-in animation, you can set `$modal-fade-transform: scale(.8)`. + ### Remove animation For modals that simply appear rather than fade in to view, remove the `.fade` class from your modal markup. |