javascript - jQuery magnific-popup : open 2 popup iframe with differents width/height

Question

)

我的代码:

<a href="subpage1.html" class="pop">OPEN POP1</a> <a href="subpage2.html" class="pop">OPEN POP2</a>

我的JS:

$('.pop').magnificPopup({  type:'iframe',  midClick: true} );

我希望 POP1 以 500px 200px 打开，POP2 以 400px 400px 打开。

如何为 POP1 和 POP2 设置不同的宽度/高度？

我必须在 HREF 中使用 CLASS 吗？或者它是 JS 中的代码，通过创建 $(.pop1) 和 $(.pop2) ？

我在类“.mfp-iframe-holder .mfp-content”中玩过宽度/高度，但设置更改了 pop1 和 pop2。

任何帮助都会很棒。 ;-)

Answer 1

你忽略了在你的问题中指定它，但我假设你正在使用 Magnific Popup plugin .为了将来引用，请详细说明以便其他人可以更轻松地为您提供帮助。

我建议为每个类别设置一个类(假设 .pop1 和 .pop2 分别对应 500x200 和 400x400 尺寸)。由于类名与生成的弹出 HTML 没有直接关系(类 .pop1 和 .pop2 不会在生成的弹出窗口中被引用)，我们无法隔离它们的弹出窗口，并且不能仅通过 CSS 完成选择性大小调整。相反，我们可以直接修改生成的 HTML——documentation states you can do .

因此，您对每个弹出窗口的初始化将类似于:

$('.pop1').magnificPopup({
    type: 'iframe',
    iframe: {
        markup: '<div style="width:500px; height:200px;">'+
                '<div class="mfp-iframe-scaler" >'+
                '<div class="mfp-close"></div>'+
                '<iframe class="mfp-iframe" frameborder="0" allowfullscreen></iframe>'+
                '</div></div>'
    }
});

请注意我是如何添加额外的 <div> 的在整个元素集周围使用内联样式。此外，您需要覆盖其中一种默认样式，以允许弹出窗口宽度以这种方式变化(该插件具有通常用于弹出窗口的标准宽度:)

.mfp-iframe-holder .mfp-content{
    width:auto;
}

这是一个 CodePen演示实际代码。希望这可以帮助!如果您有任何问题，请告诉我。