Bootstrap 5 Modal Change Animation
Bootstrap 5 Modal Change animation facilitates several variables that determine the animation transformation state of the modal, along with setting the zoom-in & zoom-out animation for the modal. The Modal opens with a fade-in animation when it is triggered using a button, although, this animation can be changed by customizing the SASS variables. The $modal-fade-transform variable can be changed to some other customized values to change the animation of the modal when triggered. For this, we have to get the SASS version and change the variables’ values there.
Modal Change animation variables:
- $modal-fade-transform(translate(0, -50px)): This variable is used to change the transformed state of the modal dialog before the modal animation.
- $modal-show-transform(none): This variable is used to change the transformed state of the modal dialog at the end of the modal animation.
- $modal-transition(transform .3s ease-out): This variable is used to change the transition properties of the modal dialog in the modal animation.
Steps to override SCSS of Bootstrap:
Step 1: Install Bootstrap using the following command
npm i bootstrap
Step 2: Create your custom SCSS file and write the variable you want to override. Then include the bootstrap SCSS file using import.
$variable_to_override: value @import "../node_modules/bootstrap/scss/bootstrap.scss";
Step 3: Convert the SCSS file to CSS using a live server extension.
Step 4: Include the CSS file in your HTML file.
<link rel="stylesheet" href="style.css">
Project Structure: The following project structure will be displayed after completing the above process:
Syntax:
$variable_to_override: value
Example 1: The code below demonstrated how to change and manipulate the $modal-fade-transform variable to change the modal’s animation. The modal which is used is a modal with a Grid.
- styles.scss:
CSS
$modal-fade-transform: scale( 2 ) ! default ; @import "./node_modules/bootstrap/scss/bootstrap.scss" ; |
- styles.css: The above SCSS file is compiled into this CSS file(only the changes shown). This file is used in the below “index.html” file.
CSS
.modal.fade .modal-dialog { transition: transform 0.3 s ease-out; transform: scale( 2 ); } |
- index.html
HTML
<!DOCTYPE html> < html lang = "en" > < head > < link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel = "stylesheet" > < link rel = "stylesheet" href = "styles.css" > < script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" > </ script > </ head > < body > < h1 class = "m-4 text-success" > w3wiki </ h1 > < h4 class = "ms-4" > Bootstrap 5 Modal Change animation </ h4 > < div class = "container" > < button type = "button" class = "btn btn-success mt-4" data-bs-toggle = "modal" data-bs-target = "#gridModal" > Launch Modal to show grid </ button > < div class = "modal fade" id = "gridModal" data-bs-backdrop = "static" data-bs-focus = "true" tabindex = "-1" aria-labelledby = "gridModalLabel" aria-hidden = "true" > < div class = "modal-dialog" > < div class = "modal-content" > < div class = "modal-header" > < h5 class = "modal-title" id = "gridModalLabel" > This Modal Contains a Grid </ h5 > < button type = "button" class = "btn-close" data-bs-dismiss = "modal" aria-label = "Close" > </ button > </ div > < div class = "modal-body" > < div class = "container p-4" > < div class = "row text-light mb-3" > < div class = "col-lg-7 bg-success border" > col-7 </ div > < div class = "col-lg-5 bg-success border" > col-5 </ div > </ div > < div class = "row text-light" > < div class = "col-lg-6 bg-secondary border" > col-6 </ div > < div class = "col-lg-6 bg-secondary border" > col-6 </ div > </ div > </ div > </ div > </ div > </ div > </ div > </ div > </ body > </ html > |
Output:
Example 2: The code below demonstrated how to change and manipulate the $modal-fade-transform and $modal-transition variables to change the modal’s animation. The modal which is used is a modal with a Dynamic Height:
- styles.scss:
CSS
$modal-fade-transform: rotate( 75 deg) ! default ; $modal-transition: transform 0.75 s ease-in ! default ; @import "./node_modules/bootstrap/scss/bootstrap.scss" ; |
- styles.css: The above SCSS file is compiled into this CSS file(only the changes shown). this file is used in the below “index.html” file.
CSS
.modal.fade .modal-dialog { transition: transform 0.75 s ease-in; transform: rotate( 75 deg); } |
- index.html
HTML
<!doctype html> < html lang = "en" > < head > < link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel = "stylesheet" > < link rel = "stylesheet" href = "styles.css" > < script src = "https://code.jquery.com/jquery-3.5.1.min.js" > </ script > < script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" > </ script > < script > $(document).ready(function() { $("#showText").click(function() { $("#text").show(); $("#myModal").modal("handleUpdate"); }); }); </ script > </ head > < body > < h1 class = "m-4 text-success" > w3wiki </ h1 > < h4 class = "ms-4" > Bootstrap 5 Modal Change animation </ h4 > < div class = "container" > < button type = "button" class = "btn btn-lg btn-success mt-4" data-bs-toggle = "modal" data-bs-target = "#myModal" > Launch Modal </ button > <!-- The Modal --> < div id = "myModal" class = "modal fade" tabindex = "-1" > < div class = "modal-dialog" > < div class = "modal-content" > < div class = "modal-header" > < h5 class = "modal-title" > This modal has Dynamic Height using < strong >jQuery</ strong >. </ h5 > < button type = "button" class = "btn-close" data-bs-dismiss = "modal" > </ button > </ div > < div class = "modal-body" > < p > < button type = "button" id = "showText" class = "btn btn-link" > Click here to see more about jQuery. </ button > </ p > < div style = "display: none;" id = "text" > < p > jQuery is an open source JavaScript library that simplifies the interactions between an HTML/CSS document, or more precisely the Document Object Model (DOM), and JavaScript. </ p > < p > Elaborating the terms, jQuery simplifies HTML document traversing and manipulation, browser event handling, DOM animations, Ajax interactions, and cross-browser JavaScript development. </ p > < p > jQuery is widely famous with its philosophy of “Write less, do more.” This philosophy can be further elaborated as three concepts:</ p > < ol > < li > < p > Finding some elements (via CSS selectors) and doing something with them (via jQuery methods) i.e. locate a set of elements in the DOM, and then do something with that set of elements. </ p > </ li > < li > < p >Chaining multiple jQuery methods on a set of elements Using the jQuery wrapper and implicit iteration </ p > </ li > </ ol > </ div > </ div > < div class = "modal-footer" > < button type = "button" class = "btn btn-danger" data-bs-dismiss = "modal" > Ok, I got it </ button > </ div > </ div > </ div > </ div > </ div > </ body > </ html > |
Output:
Reference: https://getbootstrap.com/docs/5.0/components/modal/#change-animation