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

)

我的代码：

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

我想用500px 200px打开POP1，用400px 400px打开POP2

为POP1和POP2设置不同宽度/高度的方法是什么

我必须在HREF中使用类吗？还是通过创建$（.pop1）和$（.pop2），它是JS中的一个代码

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

---

任何帮助都会很好。；-）

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

我建议每个人都参加一个课程（比如500x200和400x400尺寸的

.pop1

和

.pop2

）。由于类名与生成的弹出式HTML没有直接关系（类

.pop1

和

.pop2

将不会在生成的弹出式HTML中被引用），因此我们无法隔离它们的弹出式窗口，并且不能仅通过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>'
    }
});

---

下面是一个示例来演示代码的实际操作。希望这有帮助！如果您有任何问题，请告诉我。

您太棒了！它工作得很好，你的解释对我来说是可以理解的（我讨厌JS）。非常感谢您的帮助。：-）备注：显然我只能用PX，但不能用%表示宽度/高度太好了！我很高兴能帮上忙。是的，在当前的实现中，您只能使用静态维度。我不确定你需要如何改变百分比才能工作。。。

$('.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>'
    }
});

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