Footer menu with popups

Hi,
How can I make each link on the footer (http://greatescape.webflow.io/) a pop up? Or is there a way this can be one popup window with all the footer content and just link to the specific content (FAQ links to FAQ in long document of all footer information)?

Thanks,
Julie

Hello @Luccimia.
Looks like you already have pop-up on “About Us” link. Why you don’t want to make few more for other links? Or I just did not understand your question.

That is what I am not sure how to do.

Ok, If I get it right, you didn’t create first pop-up. Then, probably you could copy it, change there all what you need (add information or delete) and link it to the specific span in the footer.

Without read only link to your site I can’t help more, sorry.
How to share your site in “read only” mode you can see here How to Enable a Webflow Share Link - Webflow Tips - Forum | Webflow

https://preview.webflow.com/preview/greatescape?preview=6216888a830acdea35bf62adf8681b1f is the read only link. I need to have each modal window different for the footer menu and not sure how to accomplish that.

Thanks!

Hi,

Can someone offer support on this? thanks

Hello Luccimia!

First of all, I don’t know how it works on published site (http://greatescape.webflow.io/), but there is no interaction at all on your “read only” link.

I guess site was published before interaction were deleted.

SO, will create interactions again.

  • Create all needed links in the footer

  • Find “modal background” section in the Navigator. It is hidden, for
    adding changes make it “Display block”

  • Clone “modal widows” for fill it up with different content later. For being able to scroll this section apply Overflow - Auto.

  • Chose first modal window. Remove class “modal window” and create class “about” (for link ABOUT US). In this way class ABOUT will be not nested and will be visible in the interactions. Then apply class “modal window” back to this div. So you will have div with 2 classes.

  • Same procedure for every other modal windows (policy, faq, contacts)

at the end you will have:

  • While you are on modal background, create interaction for closing your pop-ups:
    chose CLOSE text and create interaction on it

Trigger- click, Affect different elements - modal background, action - display none

  • Make section “modal background” hidden again for give interaction to your footer links

  • Chose link ABOUT US and create interaction on it. There will be 3 triggers on click:
    1 - Open modal background (make it visible)


    2 - Hide all modal windows

    3 - Open modal window that you need, by chosing class that you need

  • Same procedure for every other modal link.
    You can just clone interaction “Open about” and then change the name of interaction and class modal window, that you need to open.

That’s pretty much all. Everything is working. I checked, just can’t save. Good luck

1 Like

Thank you for the instructions, however I am lost on the interactions especially the hide window. I am not seeing the same options as you have on your screens. Are you able to see what I have done?

You are welcome :smile:
Yes, I see. You added classes and few interactions. And it looks like some mess with information inside modal windows.

It is impossible that we would have different interface, so you, probably just can’t find something.

Did you try to watch tutorial videos on webflow? They are really helpful

Yes I have watched the tutorials. I have also now followed your steps in the screens for the about us link and it is not working. Please HELP!!!

Wow, wow, wow … you messed up with classes :frowning:

You can’t give the same classes to different types of elements, like divs and links (if you do not want them act in the same way) . It is main reason why transaction did not work at all.

Now you will have to go back to the version, where you had “old” classes.

Then clean up the styles

Then try all steps for create interactions. But please, do not change old classes, just add new, like in the instruction.

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