Trouble with Modal/Pop-Up

I’m needing a modal to alert people that they are leaving our website to a third-party. Found a forum post on the subject ([Tutorial] How to create a modal/pop-up in Webflow - Webflow Tips - Forum | Webflow). I followed thesergie’s instructions, but it’s not working on my website.

When you click the button, it proceeds to the third-party site bypassing the modal.

I’ve attached screen captures showing the modal and the code I placed.

Any direction and help would be appreciated. I’m not a code guy at all, so I may be missing something simple.

https://preview.webflow.com/preview/bokbrowser-upgrade?preview=a2c56a1ce2dc8990d5b645cf1ed1c873

try putting the script code in the footer custom code area. not the head code area.

That seems to help with the first link. While the modal screen does appear, it only last for less than a second and then moves on to the third-party website. How can I keep the modal screen up longer? And get it to work with the other links?

Hi @chrisgreer33, it appears that you are using custom code to do this. You should be able to do this without any custom code and using only Webflow Interactions.

Have you tried this demo:
Demo: https://preview.webflow.com/preview/demokit?preview=72388b288a26874be319ca1f7412d4eb
Page Title: Popup Menu (or try Custom Lightbox)

Try to follow these demos for your popup modal - hope this helps! :slight_smile:

Which demo? If you mean the “Popup Form Message,” then yes, I’ve looked at it. Doesn’t solve the problem.

And thesergie tutorial is the one that said we needed to add custom code.

This is supposed to be a screen that appears before the move to the third-party website. The Popup Menu is an interaction. I need an in between solution between the link and third-party site which is what thesergie’s post was supposed to solve.

What am I missing?

Hi @chrisgreer33, the main issue is that you have links on those download buttons, and those links will take precedence over the modal since the links are taking the focus away from the site the moment the link is clicked.

I would suggest removing the links on the download buttons, just open the model with those, and then show a list of the links to the actual download inside of the modal window.

So to summarize

a. user clicks the download button, opening the modal.
b. user sees the warning message in the modal window and below that, duplicated download buttons, but this time they are linked directly to the downloads.

​I hope this helps. If not, please let me know – I’m happy to assist further! :slight_smile:

Cheers,
Dave

What do I put for the redirect URL for the download buttons? Each time I delete the URL it returns?

I did as you suggested and duplicated the actual links in the modal and it still doesn’t work.

Hi @chrisgreer33, for the URLs on the original buttons used to open the modal, with the modal-link class, set the url to #.

Then republish the site and see the next result. Let me know when you republish and I can take another look :smile:

Cheers,
Dave

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