Code for more than one Modal in the same page

[VPUser (VP)]

Hello.

I’ve seen the post on modal creation: [Tutorial] How to create a modal/pop-up in Webflow - Webflow Tips - Forum | Webflow

Want to apply this to my page in the following table:

Basically I want each picture to open a different modal. In the post on modal creation you did it for a single modal. How do I do this for more than a modal in terms of code? (I’m no coder)

Here’s the link to my page: Webflow - TTF

Thank you all.

Manuel

[PixelGeek (Nelson)]

Hi @VPUser

this article may help you out : http://help.webflow.com/widgets/lightbox

[VPUser (VP)]

Thank you @PixelGeek I will check it.

[VPUser (VP)]

Hello @PixelGeek

I’m sorry but a light box won’t work for me as I need to display text in the modal. The behaviour I want in each picture is the following:

1. Click the picture (the picture is together with a link block inside a div)
2. Modal Opens and displays content I want to place inside it (text, images, …)
3. Click Close and the modal closes

I was was able to reproduce the modal shown on the modal creation post: [Tutorial] How to create a modal/pop-up in Webflow - Webflow Tips - Forum | Webflow but this is only for one modal.

If I would like to have a different modal opening with each picture would I need something like this (see below)?

Thank you.

[cyberdave (Dave S.)]

Hi @VPUser, yes, that is correct. Also remember to duplicate your modals in the designer and give them each the right class names. You will need to do that for each custom lightbox you use.

There might be ways to optimize this, but the basic code you have should work. Try it out and publish it. The first thing to look for, is what errors there are in the console. Right click the published page using chrome and select Inspect Element. There in the Console tab, you will see if there are any javascript errors.

send the link to the published page, we are happy to look cheers, dave

[VPUser (VP)]

@cyberdave @PixelGeek it worked smoothly

Here it is: http://teste-multi-modal.webflow.io/
(Sorry but some of the words are in portuguese.)

Thanks

[cyberdave (Dave S.)]

Hi @VPUser, it is working for me Cheers,
Dave

[VPUser (VP)]

Hello @cyberdave

I’m not able to make the multi modal work on my final page,

I’ve created two modals one opens in the first slide and the other opens in the second:

Page: Webflow - TTF

If I add the code for 1 it works and if I add the code for 2 it works but if I add the code for both it won’t work.

The code I’m using is the following:

For 1:

<script type="text/javascript">

$(document).ready(function() {
$('.modal-link')
    .css('cursor', 'pointer')
    .click(function(e) {
        e.preventDefault();
        $('.modal-background').fadeIn();
        $('body').css('overflow', 'hidden');
    });
$('.close-modal')
    .css('cursor', 'pointer')
    .click(function(e) {
        e.preventDefault();
        $('.modal-background').fadeOut();
        $('body').css('overflow', 'auto');
    });
});

</script>

For 2:

<script type="text/javascript">

$(document).ready(function() {
$('.modal-link2')
    .css('cursor', 'pointer')
    .click(function(e) {
        e.preventDefault();
        $('.modal-background2').fadeIn();
        $('body').css('overflow', 'hidden');
    });
$('.close-modal2')
    .css('cursor', 'pointer')
    .click(function(e) {
        e.preventDefault();
        $('.modal-background2').fadeOut();
        $('body').css('overflow', 'auto');
    });
});

</script>

For both:

<script type="text/javascript">

$(document).ready(function() {
$('.modal-link')
    .css('cursor', 'pointer')
    .click(function(e) {
        e.preventDefault();
        $('.modal-background').fadeIn();
        $('body').css('overflow', 'hidden');
    });
$('.close-modal')
    .css('cursor', 'pointer')
    .click(function(e) {
        e.preventDefault();
        $('.modal-background').fadeOut();
        $('body').css('overflow', 'auto');
    });
});

$(document).ready(function() {
$('.modal-link2')
    .css('cursor', 'pointer')
    .click(function(e) {
        e.preventDefault();
        $('.modal-background2').fadeIn();
        $('body').css('overflow', 'hidden');
    });
$('.close-modal2')
    .css('cursor', 'pointer')
    .click(function(e) {
        e.preventDefault();
        $('.modal-background2').fadeOut();
        $('body').css('overflow', 'auto');
    });
});

</script>

What I’m I doing wrong?

Cheers

[cyberdave (Dave S.)]

Hi @VPUser, thanks for the update. Can you share the final published page url, that I may check if there is any javascript messages in the console? Cheers,
Dave

[VPUser (VP)]

Hello @cyberdave

I’ve done it.

Apparently the problem was in the:

});

$(document).ready(function() {

between each modal ( As I said… I’m no coder ahah).

Here’s the final code for those who want to use it (it is done for 2):

<script type="text/javascript">

$(document).ready(function() {
$('.modal-link')
    .css('cursor', 'pointer')
    .click(function(e) {
        e.preventDefault();
        $('.modal-background').fadeIn();
        $('body').css('overflow', 'hidden');
    });
$('.close-modal')
    .css('cursor', 'pointer')
    .click(function(e) {
        e.preventDefault();
        $('.modal-background').fadeOut();
        $('body').css('overflow', 'auto');
    });
$('.modal-link2')
    .css('cursor', 'pointer')
    .click(function(e) {
        e.preventDefault();
        $('.modal-background2').fadeIn();
        $('body').css('overflow', 'hidden');
    });
$('.close-modal2')
    .css('cursor', 'pointer')
    .click(function(e) {
        e.preventDefault();
        $('.modal-background2').fadeOut();
        $('body').css('overflow', 'auto');
    });
});

</script>

[VPUser (VP)]

Here’s the final link: http://ttf.webflow.io/

Now I have to do ti for the other 4…

[cyberdave (Dave S.)]

Hi @VPUser, yep that is working perfectly for me on your site looks good Cheers,
Dave