Bootstrap 5 Modal Change Animation
At 6/7/2023
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.3s 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">
FreeSad Bootsrap Modal
</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(75deg) !default;
$modal-transition: transform 0.75s 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.75s ease-in;
transform: rotate(75deg);
}
- index.html
HTML
<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">
Freesad
</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>
