Bootstrap modal dialog not showing when using fade animation

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.

Answer

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">&times;</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>

Advertisement

Answer