CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrapbootstrap-4bootstrap-modal
Abdulsalam Elsharif
Abdulsalam Elsharif

Reputation: 5121

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

enter image description here

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 !

enter image description here

I used Bootstrap v4.3.1 ... What I miss here !!!

Thanks in advance.

Upvotes: 2

Views: 17006

Answers (5)

Johan Verschure
Johan Verschure

Reputation: 11

The modal is actually working but with full transparancy.

This might be the result of updating JQuery and/or bootstrap and NOT updating the css's involved.

Check out the css settings for '.fade'.

Remark: JQuery and bootstrap have to be in sync for modals.

Upvotes: 1

vali
vali

Reputation: 71

Replace tags such as "data-bs-target" tags with simply "data-target", removing the "-bs-" makes it work.

Upvotes: 1

Tuğba Sivri
Tuğba Sivri

Reputation: 53

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

Upvotes: 3

Sai Manoj
Sai Manoj

Reputation: 3859

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>

Upvotes: 3

Javad Alirezaeyan
Javad Alirezaeyan

Reputation: 135

see following code:

<!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/3.4.0/css/bootstrap.min.css">-->
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
  <!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script> -->
 <!--  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script> -->
 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
</head>
<body>

<div class="container">
  <h2>Modal Example</h2>
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <p>Some text in the modal.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
      
    </div>https://stackoverflow.com/questions/56521289/bootstrap-modal-dialog-not-showing-when-using-fade-animation#
  </div>
  
</div>

</body>
</html>

Upvotes: 0

Related Questions