jQuery放大弹出窗口:打开2个不同宽度/高度的弹出窗口

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

本文关键字：窗口 高度 2个 放大 打开 jQuery      更新时间：2023-09-26

(

我的代码：

<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(和$(.pop 2(？

我在"mfp iframe holder.mfp content"类中使用了宽度/高度，但设置更改了pop1和pop2。

任何帮助都会很棒

您在问题中忽略了指定它，但我假设您使用的是Magnific Popup插件。为了将来参考，请指定，以便其他人更容易帮助您。

我建议每个都使用一个类(假设.pop1和.pop2分别用于500x200和400x400尺寸(。由于类名与生成的弹出HTML没有直接关系(.pop1和.pop2类不会在生成的弹出中被引用(，我们无法隔离它们的弹出窗口，并且不能仅通过CSS进行选择性调整。相反，我们可以直接修改生成的HTML–文件中说明你可以做的事情。

因此，您对每个弹出窗口的初始化将看起来像：

$('.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来演示代码的实际操作。希望这能有所帮助！如果你有任何问题，请告诉我。

相关文章：