jQuery magnific-popup：打开2弹出iframe与不同的宽度/高度 [英] jQuery magnific-popup : open 2 popup iframe with differents width/height

问题描述

）

我的代码：

<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打开500像素200像素，POP2 400像素400像素。

I would like POP1 to open with 500px 200px, and POP2 with 400px 400px.

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

What is the way to set differents width/height for POP1 and POP2 ?

我必须在HREF中使用CLASS ？或者是JS中的代码，通过创建一个$（。pop1）和$（。pop2）？

Do I have to use a CLASS in the HREF ? or is it a code in the JS, by creating a $(.pop1) and $(.pop2) ?

我在类中使用width / height。 mfp-iframe-holder .mfp-content，但设置更改pop1和pop2。

I played with width/height in the class ".mfp-iframe-holder .mfp-content" but the settings change both pop1 and pop2.

任何帮助将是巨大的。 ;-)

Any help will be great. ;-)

推荐答案

你忽略了在你的问题中指定它，但我想假设你使用< a href =http://dimsemenov.com/plugins/magnific-popup/ =nofollow> Magnific Popup插件。

You neglected to specify it in your question, but I'm going to assume you're using the Magnific Popup plugin. For future reference, please specify that so it is easier for others to assist you.

我建议每个课程使用一个课程（比方说分别为500x200和400x400尺寸的.pop1 和 .pop2 ）。因为类名与生成的弹出HTML没有直接的关系（类 .pop1 和 .pop2 在生成的弹出窗口中引用），我们不能隔离他们的弹出窗口和选择性调整不能通过单独的CSS。相反，我们可以直接修改生成的HTML– 文档声明您可以执行。

I would suggest going with a class for each (let's say .pop1 and .pop2 for the 500x200 and 400x400 sizes, respectively). Since the class names have no direct relationship to the resultant popup HTML (the classes .pop1 and .pop2 will not be referenced in the generated popup), we cannot isolate their popups and the selective sizing cannot be done through solely CSS. Instead, we can modify the generated HTML directly – something which the documentation states you can do.

因此，每个弹出窗口的初始化将如下所示：

So, your initialization for each popup will look something like:

$('.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> 在整个元素集中使用内联样式。此外，您需要重写一个默认样式，以允许弹出窗口宽度以这种方式变化（插件具有通常用于弹出窗口的标准宽度）。

Note how I added an additional <div> with inline styling around the entire set of elements. Also, you'll need to override one of the default styles to allow the popup width to vary in this manner (the plugin has a standard width it usually uses for popups:)

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

这里是 CodePen 来演示代码的操作。希望这可以帮助！如有任何问题，请与我们联络。

Here's a CodePen to demonstrate the code in action. Hope this helps! Let me know if you have any questions.

这篇关于jQuery magnific-popup：打开2弹出iframe与不同的宽度/高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！