jQuery magnific-popup：打开 2 个不同宽度/高度的弹出 iframe

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。为了将来参考，请注明，以便其他人更容易为您提供帮助。

我建议为每个类设置一个类（假设分别为 500x200 和 400x400 尺寸的 .pop1 和 .pop2）。由于类名与生成的弹出式 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 来演示实际代码。希望这可以帮助！如果您有任何问题，请告诉我。