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）？

我在课堂上播放宽度/高度＆＃34; .mfp-iframe-holder .mfp-content＆＃34;但设置会更改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来演示代码的实际效果。希望这可以帮助！如果您有任何问题，请告诉我。

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

1 个答案: