猫头鹰轮播打破了引导模式答案

【问题标题】：Owl carousel breaks Bootstraps modals猫头鹰轮播打破了引导模式
【发布时间】：2018-10-08 11:27:23
【问题描述】：

我想在页面加载时调用 Bootstrap modal。但是模态显示不正确，只有正文“模态打开”，正文不会滚动，因为隐藏了样式溢出。我知道由于在我的 js 文件中是 Owl 轮播代码，所以发生了这个错误。删除 Owl carousel js 文件时，引导程序正常工作。

有没有办法解决这个问题？

在此链接中，您可以看到问题所在。 https://codepen.io/ghaem/pen/mzOLey

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

【问题讨论】：

标签： javascript jquery css twitter-bootstrap owl-carousel

【解决方案1】：

缺少 jquery 文档准备功能

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

【讨论】：

【解决方案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>

【讨论】：

【解决方案3】：

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

你需要把你的 js 放到文档中准备好

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

【讨论】：

【解决方案4】：

尝试改为，

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

【讨论】：