如何在Magnific Pop-Up中彈出iframe樣式？

我想顯示一個iframe，如http://chesstao.com/test.php（單擊綠色框）。但是我沒有看到一種方法或類來設計iframe的高度和寬度。如何在Magnific Pop-Up中彈出iframe樣式？

HTML: <div> 
<a href="games/header-test.php?game=aveskulov" class="my-popup iframe-link">Show iframe popup</a> 
</div>

的JS：

<!--Magnific-popup--> 
<script src="//cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/0.8.9/jquery.magnific-popup.min.js" ></script> 

<script type="text/javascript"> 

$(document).ready(function() { 

$('.iframe-link').magnificPopup({type:'iframe'}); 

});</script>

的CSS：

.my-popup {height:900px; width:1200px}

我怎樣才能代號爲莊重的彈出的iframe的樣式（高度和寬度）？我很困惑。上面的樣式簡單地被忽略。

來源

2013-07-28 verlager

這不是一個完整的答案，但它可能有所幫助。在你的CSS類做這樣的事情

$('.iframe-link').magnificPopup({ 
    type: 'iframe', 
    iframe: { 
     markup: '<div class="mfp-iframe-scaler your-special-css-class">'+ 
         '<div class="mfp-close"></div>'+ 
         '<iframe class="mfp-iframe" frameborder="0" allowfullscreen>   </iframe>'+ 
        '</div>' 
    } 

});

然後：

改變你的選擇，這樣的事情

.your-special-css-class { 
    max-width: 320px !important; 
    height: 85%; 
    margin: auto; 
    max-height: 780px; 
    padding: 140% 16px 0 13px !important; 
}

調整高度的重要組成部分，是填充....

來源

2014-01-21 12:59:15 cw24

非常好，爲我工作。 –

$(document).ready(function() { 
    $('.open-popup-link').magnificPopup({ 
     type: 'iframe', 
     iframe: { 
      markup: '<style>.mfp-iframe-holder .mfp-content {max-width: 900px;height:500px}</style>'+ 
        '<div class="mfp-iframe-scaler" >'+ 
        '<div class="mfp-close"></div>'+ 
        '<iframe class="mfp-iframe" frameborder="0" allowfullscreen></iframe>'+ 
        '</div></div>' 
     } 
    }); 
    });

來源

2015-11-20 09:11:57 taijisk

感謝它爲我工作。 – Slan

添加此彈出呼籲爲我做後：

$('.mfp-content').css('height','100%');

這使我不必更改CSS，因此我可以根據需要更改高度。並用

alignTop: true

來源

2016-04-12 12:13:59 stukerr

如何在Magnific Pop-Up中彈出iframe樣式？

回答

相關問題