Bootstrap 5 Modal is used to show dialogues to the frontend user using bootstrap’s JavaScript library. The Modal used Bootstrap’s fade animation when it is opened and closed. The animations can be removed by removing the fade class from the modal component or by manually setting the transition and transform properties of the modal and modal dialog to none.
Bootstrap 5 Modal Remove Animation Class:
- fade: This class is used to apply the fade animation when the modal is shown or hidden. By just removing this class you can withdraw the animation.
Syntax:
<div class="modalfade" id="..."> ... </div>
Example 1: In this example, the fade animation of the modal is removed removing the fade class from the modal.
<!DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href=
<!-- Bootstrap Javascript -->
<script src=
</script>
<script src=
</script>
</head>
<body>
<div class="container">
<div>
<h1 class="text-success">
GeeksforGeeks
</h1>
<strong>
Bootstrap 5 Modal Remove Animation
</strong>
</div>
<div class="modal" id="gfg" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title" id="gfgLabel">
GeeksforGeeks
</h1>
</div>
<div class="modal-body">
GeeksforGeeks is a computer science
portal for the geeks. Here you can
consume computer science related content
or share your knowledge with
the world by contributing on the write
portal.
</div>
</div>
</div>
</div>
<div class="modal fade" id="gfg-fade" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title" id="gfgLabel">
GeeksforGeeks
</h1>
</div>
<div class="modal-body">
GeeksforGeeks is a computer science
portal for the geeks. Here you can
consume computer science related
content or share your knowledge with
the world by contributing on the write
portal.
</div>
</div>
</div>
</div>
<div class="mt-4">
<button class="btn btn-success" data-bs-toggle="modal" data-bs-target="#gfg">
Show Modal without fade class
</button>
<button class="btn btn-danger"
data-bs-toggle="modal" data-bs-target="#gfg-fade">
Show Modal with fade class
</button>
</div>
</div>
</body>
</html>
|
Output:
Example 2: In the below example, we can set the transition and transform properties for the modal and modal-dialog to “none” to remove the modal animation. But here we will just removing the fade animation.
<!DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href=
<!-- Bootstrap Javascript -->
<script src=
</script>
<script src=
</script>
</head>
<body>
<div class="container">
<div>
<h1 class="text-success">
GeeksforGeeks
</h1>
<strong>
Bootstrap 5 Modal Remove Animation
</strong>
</div>
<div class="modal" id="gfg" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title" id="gfgLabel">
GeeksforGeeks
</h1>
</div>
<div class="modal-body">
GeeksforGeeks is a computer science
portal for the geeks. Here you can
consume computer science related
content or share your knowledge with
the world by contributing on the write
portal.
</div>
</div>
</div>
</div>
<button class="btn btn-success mt-5"
data-bs-toggle="modal" data-bs-target="#gfg">
Show Modal Without Animation
</button>
</div>
</body>
</html>
|
Output:
Remove: https://getbootstrap.com/docs/5.2/components/modal/#remove-animation