Advertisements
How to remove slide down effect from Bootstrap modal
Topic: Bootstrap / SassPrev|Next
Answer: Remove the fade Class from Modal
By default, on activation the Bootstrap modal window is displayed after a short slide down transition. However, if you don't like this and want to remove the animation just take out the fade class from the .modal element. Let's try out an example to see how it really works:
Example
Try this code »<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Remove Slide Animation from Bootstrap Modals</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery-3.5.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<!-- Button HTML (to Trigger Modal) -->
<a href="#myModal" class="btn btn-primary btn-lg" data-toggle="modal">Launch Demo Modal</a>
<!-- Modal HTML -->
<div id="myModal" class="modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Confirmation</h5>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<p>Do you want to save changes you made to document before closing?</p>
<p class="text-warning"><small>If you don't save, your changes will be lost.</small></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</body>
</html>Related FAQ
Here are some more FAQ related to this topic:
- How to align Bootstrap modal vertically center
- How to launch Bootstrap modal on page load
- How to prevent Bootstrap modal from closing when clicking outside
Advertisements
