[Tutorial] Multiple popups

Community resources Webflow Tips
1

Multiple popups tutorial

Hey, I just wanted to show you that little video I made. In this tutorial you will see how I make 90% of your requests on forum. I just go on webflow and code it :slight_smile: I’m sorry I didn’t talk while recording but I have some troubles with speaking. Enough talking! Here is the video:

If you like my work you can always donate using details in my profile! :slight_smile:

6 Likes
2

Hi

It worked like a charm, I made a test page with a slider and three painting images, it only took me 15 minutes to make it work. The video was perfect as I could go back and forth to see what you were doing.
Now I have to redo the paintings page and adjust the classes styles, but this is easy.

I still have question: is it possible to have two different kinds of popup on the same or different pages, for example on the each page I have some different kind of artwork: paintings, collages etc. but each page also have a contact button part of the menu. How do I create a popup contact as well as the popup for the slider images?

Thanks again

Didier

3

Hey, sorry that video is a little messed up but one you’re done watching you will understand what I did there. Here is the code:

$('#contact-btn').click(function(e) {
    $('.popup-contact-bg').fadeIn();
    e.preventDefault(); // This line and the e in function will prevent
                        //from default actions for button which in this
                        // case is a "go to link: #"
});
$('.popup-contact-close').click(function() {
    $('.popup-contact-bg').fadeOut();
});

and here is the video:

2 Likes
4

Thank you once again Bartosz!

A few questions though. It was a little hard to see in the video, but am I correct in saying that the full size versions of the images that appear in the popup are the 100% size of the original file, and the thumbnails are scaled down?

One thing I wasn’t sure about with the original modal tutorial was how a gallery like you’ve demonstrated here would effect the overall page size if there were many images, but looking at this it seems that you are only actually calling the images once and scaling them. Is that correct? If so bravo! just what I needed for a current project :smiley:

5

actually one more question! What if you wanted to do multiple popups for something like product descriptions, where each popup would be an individual modal with different information depending on the product clicked?

6

Yup. These are original images scaled down to the size of thumbnail. That way you load it only once.

That’s something different. I tought of having a hidden value somewhere or hidden variables that loads depends on which one is loaded. This one is hard to do and to explain on forum. You might need to hire a freelancer to find a solution for this. Check out the freelancer category on this forum :slight_smile: