Question

我有一个Magnific Popup的问题，我需要能够使用javascript函数在iframe上设置高度和宽度。以下代码对我输入的高度和宽度没有反应，有什么不对？

/// Call ////
openmagnificPopup(url, h, w);



/// Java ////

function openmagnificPopup(url, h, w){

   $.magnificPopup.open({
            items: {
            src: url,
            type: 'iframe',

            iframe: {
               markup: '<div style="'+w+'px; height:'+h+'px;">'+
    '<div class="mfp-iframe-scaler" >'+
            '<div class="mfp-close">xxxxxx</div>'+
    '<iframe class="mfp-iframe" frameborder="0" allowfullscreen></iframe>'+
    '</div></div>'
            }

        }


        });


///// CSS /////   
 .mfp-iframe-holder .mfp-content {
    width:auto;
    min-width:300px;
    min-height:300px;
 }

Answer 1

试试这个，并检查它是否会更新。

.mfp-content {
    width:300px;
    height:300px;
 }

Answer 2

您可以通过设置CSS样式调整open回调中的高度，或在.mfp-content附加另一个类

var config = {
    type: 'iframe',
    alignTop: true,
    overflowY: 'scroll',
    callbacks: { }
};

var cssHeight = '800px';// Add some conditions here

config.callbacks.open = function () {
    $(this.container).find('.mfp-content').css('height', cssHeight);
};

$('.some-handle').magnificPopup(config);

Answer 3

感谢您的回复。我已经尝试过你建议的解决方案，但看起来那个神奇的神经使用openmagnificpopup（）函数中的iframe代码。主要的问题是我需要大约10种不同的尺寸，因此我需要加入＆＃39; w＆＃39;并且＆＃39; h＆＃39;在每个案例的功能。我需要从javascript函数调用openmagnificpopup（），而不是通过

iframe: {
               markup: '<div style="'+w+'px; height:'+h+'px;">'+
    '<div class="mfp-iframe-scaler" >'+
            '<div class="mfp-close">xxxxxx</div>'+
    '<iframe class="mfp-iframe" frameborder="0" allowfullscreen></iframe>'+
    '</div></div>'
            }

Answer 4

这应该可以帮助你：

$(document).on('click', '*[data-toggle="lb-iframe"]:not(.done)', function(e) {    
        e.preventDefault();
        
        var closeBtnInside = true,
            closeOnBgClick = false,
            iframeCss = '';
        
        if( typeof($(this).data('closeonbgclick')) != 'undefined' ) {
            closeOnBgClick = $(this).data('closeonbgclick');
        }
        if( typeof($(this).data('closebtninside')) != 'undefined' ) {
            closeBtnInside = $(this).data('closebtninside');
        }
        if( typeof($(this).data('iframecss')) != 'undefined' ) {
            iframeCss = $(this).data('iframecss');
        }
        
        $(this).addClass('done').magnificPopup({
              type: 'iframe',
              iframe: {
                  markup: '<div class="mfp-iframe-scaler '+iframeCss+'">'+
                            '<div class="mfp-close"></div>'+
                            '<iframe class="mfp-iframe" frameborder="0" allowfullscreen></iframe>'+
                          '</div>'
              },
              closeOnBgClick: closeOnBgClick,
              closeBtnInside: closeBtnInside
            }).trigger('click');
    });

.mfp-iframe-holder .mfp-content {
    width: auto;
    max-width: none;
}
.mfp-iframe-scaler {
    width: 734px;
}
.mfp-iframe-scaler.mfp-iframe-lg {
    width: 1000px;
    height: 600px;
    padding: 0;
}

<a href="URL" data-toggle="lb-iframe" data-iframecss="mfp-iframe-lg" data-closeonbgclick="true"  data-closebtninside="true" title="">Popup</a>

Answer 5

您可以使用mainClass选项将自定义类添加到主容器：

$('.some-link').magnificPopup({
    // ...
    mainClass: 'my-custom-class',
});

然后您可以设置此特定弹出窗口的样式：

.mfp-wrap.my-custom-class .mfp-content {
    height: 800px;
    max-height: 90vh;
    width: 800px;
    max-width: 90vw;
}

这样，您可以为不同的弹出窗口使用不同的尺寸-只需使用不同的mainClass和单独的样式即可。

Magnific Popup iframe的高度和宽度

5 个答案: