8

我想在http://chesstao.com/test.php中显示一个 iframe （单击绿色框）。但我没有看到一个方法或类来设置 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 编码样式（高度和宽度）？我很困惑。上面的样式被简单地忽略了。

4

3 回答 3

10

这不是一个完整的答案，但它可能会有所帮助。

将您的选项更改为以下内容：

$('.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>'
   }   

});

然后在你的css类中做这样的事情：

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

调整高度的重要部分是填充....

于 2014-01-21T12:59:15.953 回答
3 
  $(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-20T09:11:57.833 回答
0

在弹出调用之后添加它为我做了：

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

这使我不必更改 CSS，因此我可以根据需要改变高度。并排使用

alignTop: true
于 2016-04-12T12:13:59.667 回答