Animation Bug...Having Two Modals with Two Separate Triggers Glitching

Design help Animations & Interactions
1

Having a weird issue here with my animations.

I have a page with two modals, both with their own trigger. I want one trigger to launch one modal. And I want the other trigger to launch another modal. With with their own respective close interactions.

You can see in the gif below that, first, I click a link in the navigation, which pulls up an “Edit” modal. I am able to exit this modal no problem by clicking on either the sides of the popup, or by clicking the cancel button. After that, I click my other button “Sign Up to Invest” in blue, and it pulls up its form just fine, but I am having trouble closing it. You can see that when I try to click away from the form, the form flashes right back up then flashes a couple more times after that. I have to refresh the view to make it go away.

I tried duplicating the original animations and changed the class names of the second modal to not interfere with the first, yet the problem persists. I can’t figure it out.

See the gif of my flow below:

Here’s my public share link. The culprit lies on the Deals Template page. Click “Edit Deal” up top for the first modal, then click “Sign Up to Invest” for the second:

https://preview.webflow.com/preview/syndication-deals?utm_medium=preview_link&utm_source=designer&utm_content=syndication-deals&preview=537cf9c3f6482afba04ad66243a2cf0a&pageId=5fa731f38eb263472c0ea83f&itemId=5fc1925e8685fb63f227fb8f&mode=preview

What am I missing?

2

Just remembered I’ve also got this code in my global Footer that disables scrolling in the background when in a modal. Could this have something to do with it?

<script>
Webflow.push(function() {
  $('#edit-button, #signup-button').click(function(e) {
    e.preventDefault();
	$('body').css('overflow', 'hidden');
  });

  $('#modal-closer, #cancel-button').click(function(e) {
    e.preventDefault();
	$('body').css('overflow', 'auto');
  });
});
</script>
3

I duplicated the project to run some experiments and was able to get it working. However when replicating the solution on the original project, I keep running into the same issue. What could be the problem?

4

FML

Checked “Loop” to off and it works.

:man_facepalming: