First of all , thanks for the great "Magnific Popup" plugin! I have a beginner' question. I'm using an iframe type. I'm showing several types of sites in the iframe , most of them are responsive and takes all the width of iframe. But in some cases when a site is not responsive , i want to add some specific class , in which i set absolute value for width , to the iframe . What is a most proper way to do it?

$.magnificPopup.open({
  items: {              
    src: myUrl,          
    type: 'iframe',
    class: '.bad-site-class' // Is there something like 'class'?
   }
});

Thank you and have a good autumn!

(Yoo-hoo , this is 100th question tagged 'magnific popup'! :) )

First of all , thanks for the great "Magnific Popup" plugin! I have a beginner' question. I'm using an iframe type. I'm showing several types of sites in the iframe , most of them are responsive and takes all the width of iframe. But in some cases when a site is not responsive , i want to add some specific class , in which i set absolute value for width , to the iframe . What is a most proper way to do it?

$.magnificPopup.open({
  items: {              
    src: myUrl,          
    type: 'iframe',
    class: '.bad-site-class' // Is there something like 'class'?
   }
});

Thank you and have a good autumn!

(Yoo-hoo , this is 100th question tagged 'magnific popup'! :) )

• javascript
• jquery
• iframe
• magnific-popup
• classname

2 Answers 2

You may use markupParse callback, e.g.:

callbacks: {
   markupParse: function(template, values, item) {
       template.find('iframe').addClass('bad-site-class');
   }
}

http://dimsemenov./plugins/magnific-popup/documentation.html#api

I did something similar by adding a data-modal-class to the trigger element and appending this class to the mfp-wrap wrapping div. You'll need this callback added in the plugin options.

callbacks: {
  beforeOpen: function() {
      var $triggerEl = $(this.st.el),
          newClass = $triggerEl.data("modal-class");
          if (newClass) {
            this.st.mainClass = this.st.mainClass + ' ' + newClass;
          }
  }
}

Then add a data attribute with your custom class to the trigger element:

<a href="#SOME-DIV" data-modal-class="mfp-custom-class">Open popup</a>

Before the modal opens it will concatenate your data attribute class to the mainClass option. Hope it helps!