Сова ломает карусели Бутстрапс модс - PullRequest
0 голосов
/ 08 октября 2018

Я хочу назвать Bootstrap модальным при загрузке страницы.но модал не отображается должным образом, и просто тело становится «модально открытым», а тело не прокручивается из-за скрытого переполнения стиля.Я понимаю, что из-за того, что в моих js-файлах был код карусели Owl, произошла эта ошибка.при удалении Owl carousel js файл boottrap работает корректно.

Есть ли какое-нибудь решение этой проблемы?

По этой ссылке вы можете увидеть проблему.https://codepen.io/ghaem/pen/mzOLey

Несмотря на то, что модал $('#myModal').modal('show'); не запускается при загрузке страницы.

Ответы [ 4 ]

0 голосов
/ 08 октября 2018

вместо этого попробуйте,

$(document).ready(function(){
 $('#myModal').modal('show');
)};
0 голосов
/ 08 октября 2018

Просто нужно использовать $(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>
0 голосов
/ 08 октября 2018

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

вам нужно положить свой документ в готовом документе

$(document).ready(function(){
    $('#myModal').modal('show');
  });
0 голосов
/ 08 октября 2018

Отсутствует функция готовности документа jquery

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