Search code examples
javascriptjquerytwitter-bootstrapmodal-dialogmagnific-popup

Magnific-Popup inside Bootstrap modal

I'm using Bootstrap's modal to render some content. In this content I have a video link and I'm using the jQuery plugin Magnific-Popup to open this video.

But when I'm in my modal and I click on the video link, the video start in the background of the modal. I have to close the modal to see it. How can I make Magnific-Popup to go on top ?

I've tried to change z-index of Magnific-Popup but it is already at 1000+, so no effect.

Basically, what I have is:

<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 for a demo if needed.

Solution

  • Option 1:

    Add data-dismiss="modal" to your 

    <a class="popup-youtube" href="https://www.youtube.com/watch?v=alJ8FmokHBo">Open YouTube video</a>

    to close the bootstrap modal.

    I forked your JSFiddle to demonstrate this.

    Option 2:

    If you want to keep the modal open then increasing the z-index (2000 worked for me but the bottom line is it needs to be greater than the modal's z-index) on the Magnific Popupcontainer is the way to go.

    <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: I just checked and the .modal BootStrap class has a z-index of 1050 and the .mfp-wrap class has a z-index of 1043 which is why the modal is on top.

    Here's another JSFiddle with the CSS modification instead of the data-dismiss.

    Note that the Magnific Popup close button does not work. It also has a z-index that will need to be changed and there may be others as well. The data-dismiss option will be the cleanest unless you absolutely need the modal to stay open.