Popup responsive magnific popup

Para mostrar junto con una galería de imágenes, popups con texto, con texto e imágenes. Además es responsive.

Para evitar que al hacer focus dentro del popup se cierre usaremos la propiedad “closeOnContentClick”

$('.simple-ajax-popup').magnificPopup({
            type: 'ajax',
            closeOnContentClick: false,
        });

<a href="ejemplo.html" class="simple-ajax-popup">clic para abrir</a>

Html popup vía Ajax (ejemplo.html)

<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <h4 id="myModalLabel" class="modal-title">Mostres</h4>
            <button title="Tancar (Esc)" type="button" class="mfp-close">×</button>
        </div>
        <div class="modal-body">
            dfsgsdf
        </div>
        <div class="modal-footer">
            sdfg
        </div>
    </div>
</div>

Actualización 2020

Para llamar a un popup vía ajax, pasando una clase css personalizada y evitando que se cierre al clicar dentro del popup o fuera, en el bg.

<a href="#urldestino" class="simple-ajax-popup">abrir</a>

$('.simple-ajax-popup').magnificPopup({
        type: 'ajax',
        closeOnContentClick: false,
        closeOnBgClick: false,
        mainClass: 'class-900',
    });

.mfp-wrap.class-900 .modal-dialog {
  height: 800px;
  max-height: 90vh;
  width: 900px;
  max-width: 90vw;
}

El html del popup sería este:

<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <h4 id="myModalLabel" class="modal-title">Gestió de resultats</h4>
            <button title="Tancar (Esc)" type="button" class="mfp-close">×</button>
        </div>
        <div class="modal-body">
            Contenido
        </div>
        <div class="modal-footer">
        </div>
    </div>
</div>
<script>
    $(".mfp-close").click(function(){
        $.magnificPopup.close();
    });
</script>

Para realizar la misma llamada pero vía iframe.

<a href="#urldestino" class="iframe-popup">abrir</a>

 $('.iframe-popup').magnificPopup({
        type: 'iframe',
        closeOnContentClick: false,
        closeOnBgClick: false,
        mainClass: 'class-1000',
    });

.class-1000 .mfp-content {
  max-width: 1000px;
}