rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-19 16:54:24 +01:00
Code Issues Actions Packages Releases Activity

Tweak modal transform (#27005)

Browse Source
This commit is contained in:
Martijn Cuppens 2018-08-13 09:00:53 +02:00 committed by XhmikosR
parent c0b40745e0
commit 57661dff6d
3 changed files with 10 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
scss/_modal.scss
View File

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

2
scss/_variables.scss
View File

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

6
site/docs/4.1/components/modal.md
View File

@ -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.