Modal Wrappers refreshing page on 'close'

Hello Webflow community,

I’ve got an issue with my modal wrappers on my first webflow site http://ashwfy.webflow.io/

When you click the ‘close’ interaction in each open modal, it closes the modal but then refreshes the entire site, which I can’t work out how to remove.

Also, now I have 6 modal windows in the builder that sit above the rest of my sections, it makes it really clunky to edit the rest of my site, does anyone have a suggestion on how to temporarily move them below everything to easily edit the rest of my site?

As a designer, Webflow has been amazing so far as a visual builder, just a few sticking points for me I hope someone here can help me with! :slight_smile:

The close button has a link set on it. Remove the link and it won’t refresh the page. :slightly_smiling:

2 Likes

Alex! Thank you, so simple and it was right there in front of me!

Don’t suppose you have any idea of how I can edit my site in the webflow builder a bit easier without having 6 modal wrappers covering everything else underneath?

Very nice wrappers, how can we do those?
would be realy cool if Webflow could have a modal component.

Hi @Ash, you are probably already doing a number of the following to manage it, but maybe this will trigger a discussion…

I run into this a bunch and there are a bunch of ways to semi-sort it. According to how your content for the modals are set up you could try any of the following and see what formula works best for you:

  1. set a wrapper for each modal with your alignment property as fixed or absolute as desired and simply toggle display: none on that class - poof, they all disappear allowing you to have access to everything below. When you need to turn them back on select them using the navigator and toggle the display property.

(this is what I plan to try next - hoping it is the answer)
2. Used in conjunction with the above try setting your modals up on their own modals page. Set the div that incompasses each as display block and they are all displayed down the page in view with everything easily accessible to edit. Save each modal content as a symbol and drop them in the modal wrappers in context on the pages where you want them to appear in the wrappers described above. Set init properties for those wrappers in interactions.

  1. OR - Set them temporarily as block and relative so they display inline on the page where they appear (in context) just below the section they will be triggered by. Use z-index to manage display and toggle back to absolute or fixed and toggle display: none when you publish.

  2. AND - Remember that init in interactions can be a handy way to alter the display on published or previewed content allowing you to display them in view in the designer and have them invisible and ready to display in preview or publish.

I am always looking for a better way - and each of these are a bit hacky and way short of perfect, but they help. If you come up with a great answer please share :smile:

Hope it helps -Robert

Thanks Orange Peel!

I followed the Webflow modal wrapper tutorial found here and made a few adjustments to work for my projects and linked them to my project covers.

1 Like

Hi Rob,

I had set up each modal to have wrappers so your 1st point has worked great, I just have to remember to turn them back on when re-publishing the site!

It does make re-editing them quite painful… so looking at your 2nd point, I’m going to try that out and let you know how I get on. If I come up with any additions I’ll be sure to share :slight_smile:

Thanks for taking the time to share your ideas!

I tried the symbol method over the weekend on a custom jumbo menu. It feels a bit tedious to build that way from scratch the start, but it works. I ultimately wrapped it as a symbol as a last step and then added 2 variations (link modifications) as symbols to populate the page menus.

Designing it on a separate page makes any future edits very simple and gets the modal out of the way on your page. I simply made the container div that I am animating display: none on the page.

This made all the difference in my situation:
If on every page or modal instance the simple animated wrapper shares the same class - then display: none on the class is universal to all instances (surprised me at 3AM, but makes sense) then I used sibling or nested only on the interactions to control the interaction for open and close to display the modal. All of the modals sharing the same class could be a disaster if you have a stack of instances all on one page as it would make it hard to turn them on or off indididually, but for inline modals / cards it may work fine. For me, with the single full-page menu on every page it was the perfect choice.

Let me know if you come up with an amazing workflow for your giant stack of modals, I am sure I will bang my head on the desk over that one :smile:

Remember that you can set an init for any instance in interactions - that is super huge. Switch all those off display: none on the page unless you need to edit. Let the init handle any that need to display in first view on page load when previewed or published. It is then completely set and forget.

And to handle the display in your interactions, set visibility to block as the first step with zero time / transition and then fade in as the second step. On close simply reverse the sequence, fade out and then set display to none as the final step.

Then everything is setup perfectly on publish and it doesn’t matter if you set them on or off.

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