CODEWITHSUNDEEP
cssbootstrap-4bootstrap-modal
max777
max777

Reputation: 143

Bootstrap modal is not getting animated

When i press the button, that opens the modal window, it opens simple, and not animated with the fade effect.

I tried adding classes to the modal like, .fadeand .modal-fade, but nothing happened.

You can see it working on my demo page. Just press the "Jobb árat szeretnék" button.

<div class="modal modal-fade fade" tabindex="-1" role="dialog" id="AjanlatkeresModal" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Értesítés</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body" style="padding-bottom:0">
        <p id="cart_added_msg"></p>
        <p id="cart_not_added_msg"></p>       
      </div>
      <div class="modal-footer">
          <button type="submit" id="kerdesButton" class="btn btn-primary"><a href="<?php echo $host; ?>/ajanlatkeres" title="Tovább az ajánlatkéréshez">Tovább az ajánlatkéréshez</a></button>
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Bezárás</button>
      </div>
    </div>
  </div>
</div>

Upvotes: 2

Views: 3666

Answers (1)

Dnyanesh_B
Dnyanesh_B

Reputation: 670

Add this css and use modalfade class instead of fade. This is manual process of fade animation, Hope it will work for you.

.modalfade {
    animation: fadeIn 2s;
    -moz-animation: fadeIn 2s; /* Firefox */
    -webkit-animation: fadeIn 2s; /* Safari and Chrome */
    -o-animation: fadeIn 2s; /* Opera */
}
@keyframes fadeIn {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-moz-keyframes fadeIn { /* Firefox */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-webkit-keyframes fadeIn { /* Safari and Chrome */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-o-keyframes fadeIn { /* Opera */
    from {
        opacity:0;
    }
    to {
        opacity: 1;
    }
}

Upvotes: 2

Related Questions