猫头鹰传送带打破了引导模式

Question

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.

Answer 1

Missing jquery document ready function

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

Answer 2

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> 

Answer 3

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

you need to put your js in document ready

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

Answer 4

try to instead,

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