Magnific Popup iframe 高度和宽度答案

【问题标题】：Magnific Popup iframe height and widthMagnific Popup iframe 高度和宽度
【发布时间】：2018-10-26 18:17:44
【问题描述】：

我遇到了 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;
 }

【问题讨论】：

直接将您的样式属性放在 iframe 上。什么不起作用？请给我们更多细节！

标签： javascript jquery iframe

【解决方案1】：

试试这个，看看它是否会更新。

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

【讨论】：

如果您在同一个网站上有不同的弹出窗口，这不是一个解决方案

【解决方案2】：

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

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);

【讨论】：

【解决方案3】：

您可以使用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 和单独的样式。

【讨论】：

【解决方案4】：

感谢您的回复。我已经尝试过您建议的解决方案，但看起来那个宏伟的神经元使用函数 openmagnificpopup() 中的 iframe 代码。主要问题是我需要大约 10 种不同的尺寸，因此我需要在每种情况下的函数中输入“w”和“h”。我需要从 javascriptfunction 调用 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>'
            }

【讨论】：

【解决方案5】：

这应该可以让你到达那里：

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

&lt;a href="URL" data-toggle="lb-iframe" data-iframecss="mfp-iframe-lg" data-closeonbgclick="true"  data-closebtninside="true" title=""&gt;Popup&lt;/a&gt;

【讨论】：