How to create a pop up window

Design help General
1

Hi, I want to design a simple responsive popup/modal window. Basically when i click a button on the main page the window appears with an (X) at the top corner to close it. Are there any examples out there.

Thanks.

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

1 Like
2

There sure are:

In very simple terms…

  • Create your modal as desired
  • Give it a z-index lower than the main page (or simply make it invisible)
  • Use Interactions on a button to then bring the modal forward (z) or make it visible
  • Use interactions to send it back again or make invisible when clicking ‘x’

More detailed explanations here in the legacy, and new versions of Webflow Interactions:

https://university.webflow.com/article/popup-modal-in-webflow-using-interactions

Let us know if you get stuck :slightly_smiling_face:

1 Like
3

Hey StuM!

I am trying to set up a pop up modal like in this tutorial, but I ran into some issues:

  • The form in my pop up modal is much longer than the form in the tutorial - how do I go about making the form float as I scroll down?
  • The form isn’t responsive on mobile devices. The size is still the same and it doesn’t move as I scroll down (same question as above). How should I go about fixing it?
  • I want to add in another interaction on the form, question “Enquiry Type – two options: New Business loan, Broker partnerships”; I want the next question “Loan amount” to only show if New Business Loan is selected above. How should I go about this?

Here is my campaign preview link.

1 Like
4

Creating a pop-up window in Webflow is a simple process that allows you to add interactive modal windows to your website without deep programming skills. For detailed guidance and more information on creating pop-ups in Webflow, I recommend reading the article : make popup webflow

1 Like
5

Hey,

There are just a few solutions for now in the thread, so I could contribute with our Popup widget. It works great with Webflow, and you can select pages of display, adjust triggers, and certainly customize things visually.

For more options, I recommend seeing Popular Websites - Webflow - that portal always has an up-to-date list of Webflow solutions.

1 Like