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

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 に答える