Opening a modal with a hyperlink

I’ve been working quite some time on using a hyperlink to a modal (since you can’t do it directly form the object (in this case a flux graphic) using the hyperlink in a foundry V3 page. This topic explains how to do it yet what I’ve tried I can’t get it working on my page. Must be quite simple yet what I tries it didn’t work. Hope someone has a hint how to do it. Thanks in advance for helping me solve this puzzle.

Where I’ve used inline HTML to trigger a Modal, in the Paragraph tool, I have the following:

Delivery is normally within five working days, but if you need something more urgently <a href="#" data-bs-toggle="modal" data-bs-target="#contact_form">please ask</a> and we'll let you know if it can be quicker.

Note the data-bs-target=“#contact_form part. You then need your Modal tool to have the same Unique Modal ID:

3 Likes

As @jacksona has pointed out, the unique modal ID is most likely the problem you are facing. Keep in mind that it’s possible to have more than 1 modal on a page. So if you use a generic name for the modal, your website won’t know which one of the 2, 3, 4 modals to open up. So that “unique name” is highly important.

But if your problem is something else please let us know!

1 Like

Thanks for your answers… Just a stupid question from me yet what do I fill in in the link pop up:

I did it years ago yet forgot it and can’t get it to work.

Ah, I thought you wanted to do this via HTML. It seems you are using the button stack as a trigger for the modal. That’s fine. So, with the F3 button stack you need to use this:
modal-trigger

Note: you need to scroll down aways in the button stack settings. You need to click the “trigger modal” option plus put in the modal ID you have (hopefully) created in your modal stack. I just tested for one of my modals and this works fine. If it still doesn’t work then we’ll need more details/screenshots from you.

1 Like

thanks mitchellm

that dose;t work since it’s a picture I have to do it through the url pop up for the link…

can you share a screenshot of what you are doing in RW/Stacks? It might take 2 shots. At any rate I’m now having a hard time imagining what you are doing vs. trying to do.

1 Like

Hi and thanks for the help Mitchellm

Here’s the problem. I use flux and fill it with a background image. In the properties I can add a link to the background in the properties (however not to a modal). To make it a little clearer I have added a short video explaining my question. I have solved it by using a header yet I’m in favour of using only the background image for opening the modal.

Here’s the video

The F3 Image tool allows you to trigger a Modal. You can put anything in the Link, and the Use link to trigger Modal tool checkbox will override it.

CleanShot 2024-04-08 at 10.18.16@2x

You may need to put an Image tool inside Flux to get the Modal triggered, rather than setting the background and a link.

2 Likes

Where does this come from? Like where does the “bs” in the phrase come from and why needed? Just curious. Is there a list of these “controls” somewhere? Thanks.

I don’t remember where this particular HTML construct came from, but as long as your Unique Modal ID is “contact_form”, it’ll trigger when a visitor clicks on the link (‘please ask’).

The ‘data-bs-toggle’ and ‘data-bs-target’ are part of the Bootstrap standard, so you have to just take them for granted and don’t change them.

<a href="#" data-bs-toggle="modal" data-bs-target="#contact_form">please ask</a>

Not aware of a list of “controls” specifically, but there may be one out there somewhere!

2 Likes