jQuery magnific-popup : open 2 popup iframe with d

问题:

)

My code :

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

My JS :

$('.pop').magnificPopup({  type:'iframe',  midClick: true} );

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

What is the way to set differents width/height for POP1 and 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) ?

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. ;-)

回答1:

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.

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

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;
}

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