Finsweet accessible modal help

Design help Custom code
1

I’m trying to just create a simple pop-up that will come up when someone clicks a link. The pop-up should tell them they are leaving the site and then have a button to click to take someone to a URL outside my site. Finsweet has an accessible modal that I’m trying to use. I’ve copied it in and I keep getting different class names and I can’t delete them to basically start over using this? I will have multiple instances of the pop-up so according to their docs each instance has to have it’s own name. Anyone used this modal component? I’m new to webflow, what am I doing wrong?

Screenshot-fs-modal2.06.40 PM
Screenshot-fs-modal2.06.40 PM554×811 41.6 KB

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

Hi Jennifer,

I’m not clear where you’re having issues, but here’s the design you need;

  • Design your modal
  • Setup a trigger button, ID it, and hide it
  • Setup a link button for the external link as part of your modal and ID it
  • Add your custom code to capture the navigate event, it will look for any link click that occurs, and determine only those that go to external sites

On an external click event, your script will;

  • Set the URL value of your modal’s navigate button
  • “Click” the trigger button to display the modal
1 Like
3

Sorry, I’m just so new to all this everything seems complicated. Typically I might have at lease 5 or 6 links to outside URLS. Everything I’m reading indicates I’d have to build a modal for EACH link that leaves my site? Typically I’d add some JS to my html site and then just have something like this: onClick="return show_confirm(); to the link and all I’d have to do is include that onClick to each link that needed the “now leaving this site” message attached to it. Maybe I’m just over complicating this. I also tried to use Finsweet accessible modal because I have to have evertything accessible and I got it to work but then couldn’t make it work for more than one link.

4

I’d recommend building it with only one modal the way I described above, and also automating the detection of “off site” links so that your client is free to create things like blog entries and the links will work as desired.

I can’t really break it down more than the design I’ve outlined above, the rest is just coding it into your specific page design. But if you’re stuck and need some pro help, I’ll be back in my office next week. Send me a message if you want to discuss.

5

I appreciate the help. I will give that a try.