Tweak modal transform (#27005)

diff --git a/scss/_modal.scss b/scss/_modal.scss
index 5eadbf5b84ba62e277462e6f64026245fa70ba65..df8da68ffa5c6fa1971580a493885362e3a91db8 100644 (file)
--- 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 8ac3bc583a4ac60d042484151127e89a0579e738..be13b5647642b4676c3126772abb56669f1293f5 100644 (file)
--- 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 ac9bf18e7c0daa1a6a9fd612d7bf204facc21a3e..2da7d8f3c3d3bf937cbc9e7c872eb2cb45868f6d 100644 (file)
--- 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.