Menu
I use Bootstrap’s JavaScript modal plugin to add dialogs to my application, I successfully use it, but I'm facing an issue when I try to use fade animation when a modal dialog is opened or closed.
Following the instruction in Bootstrap documentation and w3schools, If I used the following tag:
<div id="myModal" class="modal" role="dialog">
The popup modal open successfully without any fade animation
When I want to used fade animation I added fade to the modal class:
<div id="myModal" class="modal fade" role="dialog">
The result was transparent background without showing popup modal !
I used Bootstrap v4.3.1 ... What I miss here !!!
Thanks in advance.
922
Bootstrap 4 modal box works perfectly fine with fade class. Please refer to W3schools
Below is the example for the same if you were looking out for fade animation of modal in bootstrap 4
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<!-- Button to Open the Modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
Open modal
</button>
<!-- The Modal -->
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
Modal body..
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>I had the same problem when i was triying to open modal without button. I don't know why but instad of this:
$('#myModal').show();
doing this worked:
$('#myModal').modal("show");
answered Nov 23 '25 23:11
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With