Magnific-Popup внутри Bootstrap modal

Я использую Bootstrap's modal для отображения некоторого контента. В этом содержании у меня есть ссылка на видео, и я использую плагин jQuery Magnific-Popup, чтобы открыть это видео.Magnific-Popup внутри Bootstrap modal

Но когда я нахожусь в своем модальном режиме, и я нажимаю на ссылку видео, видео начинается на фоне модального. Я должен закрыть модальный, чтобы увидеть это. Как я могу сделать Magnific-Popup выше?

Я попытался изменить z-индекс Magnific-Popup, но он уже на 1000+, поэтому никакого эффекта.

В принципе, то, что у меня есть:

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
    <div class="modal-dialog" role="document"> 
    <div class="modal-content"> 
     <div class="modal-body"> 
     <a class="popup-youtube" href="https://www.youtube.com/watch?v=alJ8FmokHBo">Open YouTube video</a> 
     </div> 
    </div> 
    </div> 
</div> 

<script> 
$(document).ready(function() { 
    $('.popup-youtube').magnificPopup({ 
     disableOn: 700, 
     type: 'iframe', 
     mainClass: 'mfp-fade', 
     removalDelay: 160, 
     preloader: false, 

     fixedContentPos: false 
    }); 
}); 
</script>

I created a JSFiddle для демонстрации, если это необходимо.

источник

2015-08-25 Stéphane J.

Вариант 1:

Добавить data-dismiss="modal" в свой <a class="popup-youtube" href="https://www.youtube.com/watch?v=alJ8FmokHBo">Open YouTube video</a>, чтобы закрыть загрузочный модальность.

Я развернул ваш JSFiddle, чтобы продемонстрировать это.

Вариант 2:

Если вы хотите сохранить модальный общедоступна, то увеличивая z-index (2000 работал для меня, но суть в том, что должно быть больше, чем г-индекс модальной в) на Magnific Popupcontainer - это путь.

<div class="mfp-wrap mfp-close-btn-in mfp-auto-cursor mfp-fade mfp-ready" tabindex="-1" style="top: 0px; position: absolute; height: 386px; z-index: 2000"><div class="mfp-container mfp-iframe-holder"><div class="mfp-content"><div class="mfp-iframe-scaler"><button class="mfp-close" type="button" title="Close (Esc)">×</button><iframe frameborder="0" allowfullscreen="" src="//www.youtube.com/embed/alJ8FmokHBo?autoplay=1" class="mfp-iframe"></iframe></div></div></div></div>

Edit: Я только что проверил и .modal Bootstrap класс имеет z-index 1050 и .mfp-wrap класс имеет z-index из 1043, который почему модальный находится на вершине.

Вот еще JSFiddle с модификацией CSS вместо data-dismiss.

Обратите внимание, что кнопка закрытия большого всплывающего окна не работает. Он также имеет z-индекс, который нужно будет изменить, и могут быть и другие. Опция data-dismiss будет самой чистой, если вам не понадобится модальный, чтобы оставаться открытым.

источник

2015-08-25 20:15:49

Спасибо, что отлично работает, я не пошел так высоко с z-index. Мне следует иметь. Да, мне нужен модальный, чтобы оставаться открытым. –

Звучит неплохо. Посмотрите мое последнее обновление относительно z-индекса на кнопке закрытия Magnific Popup. Лучшим решением будет пройти весь масштабный всплеск css и увеличить все z-индексы относительно. –

-1

Попробуйте удалить параметр tabindex = "- 1", потому что этот параметр говорит о том, что модальность должна быть над всеми вещами.

источник

2015-08-25 19:54:02 Jonafrank

Это не работает для меня в JSFiddle:/ –

Magnific-Popup внутри Bootstrap modal

ответ

Смежные вопросы