Làm cách nào để tạo iframe bật lên trong cửa sổ bật lên Magnific?

Question

Tôi muốn hiển thị khung nội tuyến như trong http://chesstao.com/test.php (nhấp vào hộp màu xanh lá cây). Nhưng tôi không thấy một phương thức hoặc lớp để tạo kiểu cho chiều cao và chiều rộng của khung nội tuyến.

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> 

các css:

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

Làm thế nào tôi có thể mã phong cách (chiều cao và chiều rộng) cho iframe magnific popup? Tôi bối rối. Kiểu trên chỉ đơn giản là bị bỏ qua.

Answer 1

Đây không phải là câu trả lời hoàn chỉnh nhưng có thể hữu ích.

Thay đổi tùy chọn của bạn để một cái gì đó như thế này:

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

}); 

Sau đó, trong bạn lựa CSS làm điều gì đó như thế này:

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

phần quan trọng để điều chỉnh chiều cao là đệm ....

Answer 2

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

Answer 3

Thêm sau khi cuộc gọi bật lên đã thực hiện cho tôi:

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

Điều này cho phép tôi không phải thay đổi CSS để tôi có thể thay đổi chiều cao nếu cần. Được sử dụng cùng với

alignTop: true