Owl 轮播破坏了 Bootstraps 模式

Question

我想在页面加载时调用 Bootstrap 模式。但模态显示不正确，只有正文得到 "modal-open" 并且正文不滚动，因为隐藏了样式溢出。我知道由于我的 js 文件中有 Owl 轮播代码，所以发生了这个错误。删除 Owl 轮播 js 文件时 bootstrap 工作正常。

这个问题有什么解决办法吗？

在这个link中，可以看出问题所在。 https://codepen.io/ghaem/pen/mzOLey

尽管 $('#myModal').modal('show'); 模式不运行在加载页面上。

Answer 1

缺少 jquery 文档准备功能

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

Answer 2

只需要像下面这样使用$(document).ready(function():-

现在工作正常。

  $(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

你需要把你的js文件准备好

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

Answer 4

尝试改为，

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

Owl 轮播破坏了 Bootstraps 模式

Owl carousel breaks Bootstraps modals

javascript

css

jquery

twitter-bootstrap

owl-carousel