Modal disappearing on click

[esoteric_designs]

Hi everyone
This just stopped working properly. Not sure if something was changed in Webflow to make it stop working or what happened.

Visit this link: http://celiabrooks.webflow.io/

And click on “Need to redeem a gift voucher?”

Try clicking on one of the buttons in the modal and it just closes the modal instead of going off to the link. It’s like the background close DIV is on top but it’s a lower z-index than the content so it should be working fine.

I used this as a tutorial

You can see the hidden modal stuff here (holder modal>modal background, etc.). I put the read only share link at the bottom of this message:

It’s so strange because it was working perfectly before… any help would be amazing!

-Justin-

---

Here is my site Read-Only: https://preview.webflow.com/preview/celiabrooks?preview=cedb64a37dd0829185af6e08ab2ef39b

[Noah-R]

Ahh yes I see. Well I can tell you one thing. You have everything wrapper in the same div. Let me look into this. Brb.

[Noah-R]

Did you change the modal to an FAQ? I just want to know if I am looking at the right thing… I think I am, but just doesn’t make sense with the button links haha.

[esoteric_designs]

Hey dude. I have the voucher modal and an FAQ modal on the same page. But they’re both behaving the same way. I just pointed out the voucher modal because it has buttons on it. If you look at the read only link and click on “Need to redeem a gift voucher” the modal files will be next to it.

Thanks for checking!

[Noah-R]

Ok I figured it out man.
First one: I would name each modal different. So the FAQ one and the Voucher one, give them different names.

You have the close button nested inside the Modal BG. I moved it outside the Modal BG still in the Modal Holder Wrapper. Then I removed any interactions from the wrapper itself. So there is only a close interaction on the close button and an open interaction on the button you choose.

I also changed the Transform on the Modal Holder Wrapper.
I put it back on Display: Block; and then changed the Transform Scale to “.01”

I also changed the Opacity to 0 like below, so that is the standard state.

So I then deleted the interactions inside of the Open Modal interaction and the Close one to this:

I hope this helps man!

[esoteric_designs]

@Noah-R This is awesome! Fantastic fix. It also helped me figure out how keep it how it is but changed a smidgen so it will actually work correctly. I had the parent modal with the close action. If I nested that close action into the modal-bg (one level down) the click won’t follow through to the parent holder. I made that DIV fixed so the click could happen anywhere on the black part of the modal. Also it helped me find that I had some hidden JS to lock the background that was being repeated twice.

You’re the man! I wish we could give trophies on here or something!

[Noah-R]

Haha, that’s funny!
Awesome though! So glad that helped you dude! That’s great to hear!
Love how you made those buttons too! Very cool! It’s coming together great!

Wish you the best man!
-J

[system]

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.