▼
Streaming live at 10am (PST)

Multiple modal/popup windows?

#1

Hi

here is my new site web flow public address.

https://webflow.com/design/dfpaintings?preview=d5c00f1df05879763cd91b4e7f3cedf0

The site is to display my various artworks, paintings, drawings etc. have a look, any suggestion welcome.

I manage so far to make a modal window fade in and fade out, ( in the painting page, not yet done right but the popup works).

I would like to do it for all the paintings. But so far I have not managed to make two modal windows work. I tried to duplicate the JS code, with the new classes for the new modal window : I had a modal1 on the home page to display the contact info, then a modal2 on the painting page to display a larger image of the first painting.

Only modal2 worked, modal1 did not. If I deleted the code for modal2 then modal1 worked?, so the question is how do I set up multiple modal windows, in the same page or other pages?

#3
#4

Hi, Thanks, I just watch your video. Two things: can you post the code you use in this forum? and then,
You are using container with 3 columns, one for each photo. Will this method work with a slider with way more images? I have more than 40 paintings to show.

Thanks again that was very fast. I will try to implement your code on a blank window first. I am a real new be, but I am like a dog with a bone, I do not give up, i try and try until it works....:)

Didier

#5

You can add this to your custom code to have this kind of custom functionality... 

<script>
    $(document).ready(function() {
        $('.gallery-image').click(function() {
            var image = $(this).attr('src');
            $('.popup-container').html('<img src="' + image + '" />');
            $('.popup-bg').fadeIn();
        });
        $('.popup-bg').click(function() {
            $(this).fadeOut();
        });
    });
</script>

You can use slider easily. As you can see the code the class .gallery-image triggers the function.

#6

Hi Bartek,

I've been using your modal code on a couple of sites (thank you!), but one thing I've noticed is that if I click on the background to close, I can't scroll up or down anymore! However if I use the 'close' link, everything works fine....

Any idea why this would be happening?
Here is the live link (click on the 'more details on the product images)
http://natures-best.com.au/livestock.html

#7

On $('.close-modal') you have a line: $('body').css('overflow', 'auto'); Try adding this one too to the $('.modal-background') smile

#8

Hello Bartek, thanks for your code.

I have one question: what if the multiple modals must contain different text? For like a services page?

Thank you

#9

https://jsfiddle.net/va3jm1d2/

You're welcome :)

closed #10