Modal Combo class help

Hi,

I am creating multiple modals on one page that flow into one another, but i wish to use the same classes and create combo classes.

The combo class i have is “modal-background” & “appear” and i wish to put it in this bit of code below

$(document).ready(function() {
  $('.modal-link').click(function() {
    $('.modal-background').fadeIn();
  });
  $('.close-modal').click(function() {
    $('.modal-background').fadeOut();
  });
});

Hi @bwalls1992

Can you please update your post with some more information so we can help you faster? Things like screenshots and your environment info really speed things up.

Posting guidelines can be found here: Posting Guidelines for the Design Help Category - General - Forum | Webflow

Thanks in advance! :slight_smile:

Cheers

Basically i want to have a few modals on my page:

  1. “Modal Background”
  2. “Modal Background” “appear”

The first one is done with the code above, however how do i insert 2 classes to this line of code (below)

$(‘.modal-background’).fadeIn();

is it simply:

$(‘.modal-background’,‘appear’).fadeIn(); ???

Hi @bwalls1992, I would suggest to give each modal it’s own class name to use with that code. Duplicate the code snippet for each modal that will be used.

Alternatively, you can refer to modal by it’s ID set in the settings panel. For example, instead of targeting the class, target the ID:

$(document).ready(function() {
  $('.modal-link').click(function() {
    $("#modal-one").fadeIn();
  });
  $('.close-modal').click(function() {
    $("#modal-one").fadeOut();
  });
});

In this way, you can give your modals whatever classes you want, and refer to them by ID instead.
I hope this helps!

Ok @cyberdave ,

So i have tried to connect the two modals so one loads after the other, but i think the code is wrong.

<script type="text/javascript"> $(document).ready(function() { $("#continue-btn").click(function() { $("#modal-one").fadeIn(); }); $("#signup").click(function() { $("#modal-one").fadeOut(); }); $("#signup").click(function() { $("#modal-two").fadeIn(); }); }); </script>

Hi @bwalls1992, is it possible to share the read-only link to the site? Or maybe create a test site that can be shared?

Sorry @cyberdave ,
here you go

https://preview.webflow.com/preview/inkfndry?preview=26bcfd6d07cd5a400b5b3f8d2e097811

Under ‘Artist Onboarding - Untitled’

Thanks @bwalls1992, I am taking a look :slight_smile:

If this is too hard, im just going to use a slider…! @cyberdave

Hi @bwalls1992, thanks, I am trying to understand, the sequence of events, first the user click the continue button, then what do you want to happen exactly, step by step?

Also, I noticed there are some other javascript errors on the page, which halt the execution of javascript, so that should be checked and fixed in order for other javascript to run.

Usually removing the custom code one code block at a time to isolate the issue will help… I am happy to continue looking at this.

If you just want to use a slider, that’s cool, I guess I am not sure exactly what the end target effect should be.