CODEWITHSUNDEEP
javascriptjquerycsstwitter-bootstrapowl-carousel
nyn05
nyn05

Reputation: 560

Owl carousel breaks Bootstraps modals

I want to call Bootstrap modal when page loading. but modal doesn't show properly and just body gets "modal-open" and body don't scroll because of style overflow hidden. I understand that because of being Owl carousel code in my js files this error happened. when removing Owl carousel js file bootstrap works correctly.

Is there any solution to this problem?

In this link, you can see the problem. https://codepen.io/ghaem/pen/mzOLey

Despite the $('#myModal').modal('show'); modal don't run on loading page.

Upvotes: 0

Views: 864

Answers (4)

seema
seema

Reputation: 354

try to instead,

$(document).ready(function(){
 $('#myModal').modal('show');
)};

Upvotes: 0

Rahul
Rahul

Reputation: 4374

https://codepen.io/anon/pen/jeVpvM

you need to put your js in document ready 

$(document).ready(function(){
    $('#myModal').modal('show');
  });

Upvotes: 0

Rohit Verma
Rohit Verma

Reputation: 3783

Just need to use $(document).ready(function() like below:-

Now its working fine.

  $(document).ready(function(){
  $('#myModal').modal('show');
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/js/bootstrap.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>


<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button>

<div id="myModal" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

Upvotes: 0

Hassan Voyeau
Hassan Voyeau

Reputation: 3634

Missing jquery document ready function

<script>
    $( document ).ready(function() {
        $('#myModal').modal('show');
    });
</script>

Upvotes: 3

Related Questions