I have a problem with Magnific Popup where I need to be able to set the height and width on the iframe with a javascript function. The following code does not react to the heights and widths I put in, what's wrong?

/// 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;
 }

I have a problem with Magnific Popup where I need to be able to set the height and width on the iframe with a javascript function. The following code does not react to the heights and widths I put in, what's wrong?

/// 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;
 }

• javascript
• jquery
• iframe

• put your style attribute on the iframe directly instead. What is not working in this? Give us more details please ! – Yann Chabot Commented Apr 28, 2015 at 20:38

5 Answers 5

You can use mainClass option to add custom class to main containers:

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

Then you can style this particular popup:

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

In this way you can use different dimensions for different popups - just use different mainClass and separate styles.

Try this one, and check if it would update.

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

You can adjust the height in the open callback, by setting CSS style or append another class on .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);

Thanks for your replies . I've tried the solution you suggest , but it looks like that magnific nerver use the iframe code in the function openmagnificpopup(). And the main problem is that i need ca 10 different sizes and because of that i need to put in 'w' and 'h' in the function for each case. I need to call openmagnificpopup() from a javascriptfunction, not via

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>'
            }

This should get you there:

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