Как стилизовать всплывающее окно iframe в Magnific Pop-Up?

Я хочу показать iframe, как в http://chesstao.com/test.php (щелкните зеленое поле). Но я не вижу метода или класса для определения высоты и ширины 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? Я сбит с толку. Приведенный выше стиль просто игнорируется.


magnific-popup
person verlager    schedule 28.07.2013    source источник

Ответы (2)


arrow_upward
10
arrow_downward

Это не полный ответ, но он может помочь.

Измените свои параметры на что-то вроде этого:

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

важная часть для регулировки высоты - это набивка....

person cw24    schedule 21.01.2014

arrow_upward
0
arrow_downward

Добавление этого после вызова всплывающего окна сделало это для меня:

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

Это позволяет мне не менять CSS, поэтому я могу изменять высоту по мере необходимости. Используется вместе

alignTop: true
person stukerr    schedule 12.04.2016