2013-10-30 170 views
4

首先,感謝偉大的「Magnific Popup」插件!我有一個初學者的問題。 我正在使用iframe類型。我在iframe中展示了幾種類型的網站,其中大部分都是響應式的,並且佔用了iframe的所有寬度。但在某些情況下,當一個網站沒有響應時,我想添加一些特定的類,其中我設置寬度的絕對值,到iframe。什麼是最合適的方式來做到這一點?Magnific Popup - 爲iframe添加額外的類

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

謝謝,祝你有個美好的秋天!

(俞灝,這是標記 '蕩氣迴腸彈出' :) 100的問題!)

回答

9

您可以使用markupParse回調,如:

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

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

+0

不錯,但是它在處理'mfp-content'內容,我如何在'mfp-content'本身上應用一個類? – Cherniv

+0

http://dimsemenov.com/plugins/magnific-popup/documentation.html#mainclass –

+0

非常棒,非常感謝! – Cherniv

5

我沒有類似的東西通過向觸發器元素添加數據模式類並將此類添加到包裝div中的mfp-wrap。您需要在插件選項中添加此回調。

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

然後用您的自定義類中添加數據屬性,以便觸發元素:模式打開,將串連您的數據屬性類的mainClass選項

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

之前。希望能幫助到你!

+0

謝謝,看起來很有用 – Cherniv