Enlarged popup with JS generated link

I want to use magnific popup in dynamically generated content . I have a link generated via javascript and want to use an iframe popup with that link.

HTML:

<div id="content">
  <a href="https://www.google.com/" class="mp">link</a>
</div>

      

JS:

$(function(){
    $('.mp').magnificPopup({
          type: 'iframe',
          closeOnContentClick: false,
          closeBtnInside: true,
          removalDelay: 300,
          mainClass: 'mfp-with-zoom mfp-img-mobile my-mfp-slide-bottom'
    });

    var a = $("a").clone();
    a.text('generated');
    a.appendTo('#content');

});

      

live example: jsfiddle

With the classic static link everything works well, but it doesn't work with the generated link. Is there some sort of "update" function that will register the generated link to enlarge the popup?

I tried to build a new magnific instance after creating the link and it works, but are there any cleaner solutions?

Thanks for any answer.

+3


source to share


1 answer


Thanks to @MVCDS I figured it out, theres an option for this.



$('body').magnificPopup({
      delegate: 'a.mp',
      type: 'iframe',
      closeOnContentClick: false,
      closeBtnInside: true,
      removalDelay: 300,
      mainClass: 'mfp-with-zoom mfp-img-mobile my-mfp-slide-bottom'
});

      

+6


source







All Articles