Streaming live at 10am (PST)

How to create a pop up window

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)

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:

Let us know if you get stuck :slightly_smiling_face:

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.