javascript Magnific Popup iframe 的高度和宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29929265/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Magnific Popup iframe height and width
提问by Mr.Swed
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?
我在使用 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;
}
回答by Robin Carlo Catacutan
Try this one, and check if it would update.
试试这个，看看它是否会更新。
.mfp-content {
width:300px;
height:300px;
}
回答by sglessard
You can adjust the height in the opencallback, by setting CSS style or append another class on .mfp-content
您可以在open回调中调整高度，通过设置 CSS 样式或附加另一个类.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);
回答by rob006
You can use mainClassoption to add custom class to main containers:
您可以使用mainClass选项将自定义类添加到主容器：
$('.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 mainClassand separate styles.
通过这种方式，您可以为不同的弹出窗口使用不同的尺寸 - 只需使用不同 mainClass且单独的样式即可。
回答by Mr.Swed
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
感谢您的回复。我已经尝试过你建议的解决方案，但看起来那个伟大的神经使用函数 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>'
}
回答by Sidney Veiga
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>