Bootstrap modal dialog not showing when using fade animation

javascript jquery twitter-bootstrap bootstrap-4 bootstrap-modal

10,934

Solution 1

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>

Solution 2

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");

10,934

Abdulsalam Elsharif

Updated on June 04, 2022

Comments

Abdulsalam Elsharif almost 2 years
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.
- Faytraneozter almost 5 years
  
  I think if you just add the fade class from javascript it will not work. You need to add show class too. But if you call it via bootstrap way, i think its ok
- Abdulsalam Elsharif almost 5 years
  
  @Faytraneozter, Thanks for your comment, But regarding to the links that I mentioned in my question, just adding fade and there's no show in there
- Shivendra Singh almost 5 years
  
  Just see the 'myModal' div in inspect. and increase the z-index of #myModal and check.