Bootstrap Modal работает только на мобильном устройстве

Привет,

Я создал загрузочный модал 3, и он работает на моем мобильном устройстве, но на рабочем столе, когда вы нажимаете кнопку, он не открывает модал.

Я пытался изменить размер модального окна, даже настраивая его zindex, но это не решило проблему.

Кто-нибудь знает, в чем проблема?

<div class="container-fluid formbox ">
<div id="cageModal" class="modal fade" role="dialog" class="col-sm-10 col-sm-offset-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title">Cage The Great</h4>
</div>
<div class="modal-body">
<iframe width="100%" height="100%" src="https://www.youtube.com/embed/VqghSmwdnpg" frameborder="no" allowfullscreen></iframe>
<button type="button" class="btn btn-default" data-dismiss="modal">See More</button>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>

<div class="container-fluid formbox ">
<div class="col-xs-12 col-sm-12">
<h3>Get Familiar with the artists below.</h3>
<div class="col-xs-8 col-xs-offset-2 col-sm-6 col-sm-offset-3">
<div>  <button type="button" class="btn btn-block btn-info btn-lg" data-toggle="modal" data-target="#cageModal">Cage The Great</button>
</div>
</div>
</div>
</div>

Неработающий код на jfiddle

1

Решение

Ваш код правильный. Но ваши ссылки начальной загрузки (CDN) — нет.

замените ваши ссылки на Bootstrap самой последней. Или еще лучше, используйте Bootstrap локально и никогда не трогайте его!

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

Вот твой сломанный jfiddle, сейчас работает

0

Другие решения

Других решений пока нет …

По вопросам рекламы [email protected]