Question

我想在页面加载时调用Bootstrap模式。但是模态无法正确显示，只是主体被“模态打开”，并且主体由于隐藏的样式溢出而无法滚动。我了解，由于在我的js文件中使用Owl轮播代码，因此发生了此错误。删除Owl carousel js文件时，引导程序可以正常工作。

这个问题有解决方案吗？

在此链接中，您可以看到问题。 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');
)};

猫头鹰轮播打破了Bootstraps模式

4 个答案: