Accessible Webflow popup modal
Display a popup when a button is clicked with Tab trap and Custom Focusable element.
How to build a popup modal in Webflow
Firstly, make sure you have the VisualDX script before your </body>. Checkout the Quick Start for how to do this.
Create Open Button
Copy this attribute:
Paste the attribute into the Custom Attributes Name field of a Webflow Button.In the Value field add a unique identifier.
Create Popup Element
Copy this attribute:
Paste the attribute into the Custom Attributes Name field of a Webflow Div Block or Custom Element. In the Value field add the same unique identifier as the popup button.
Create Popup Close Button
Copy this attribute:
Paste the attribute into the Custom Attributes Name field of a Webflow Buttonwhich is a child of the Popup. Note: we do not need a value here.
Convert Custom Element to Dialog
In the settings if a Custom Element change the Tag from a Div to a Dialog. This will set the popup to Display: none.
Select Custom Focusible element
Copy this attribute:
Paste the attribute into the Custom Attributes Name field of a Webflow Input (Text Field) of a Webflow Form.
Add animations to popup child elements
In this example the From Block will move from a starting position of 32px below to it's original position in 1000ms with an easing of Ease.
Copy this Combo Class:
Paste the combo class into a style selector of Form Block .
Style your the combo classes. eg. Set the Transforms to 0px and give the width transition a time of 1000ms and easing of Ease.
Delete the combo class and update the Transform Y to -32 px and Transitions to 500ms.
Publish
Sponsor the Magic and
Buy Me a Beer
VisualDX is a free JavaScript library made for Webflow nerds like yourself. No ads, no paywalls—just pure, unfiltered JavaScript magic to supercharge your builds. If it’s saving you time, making your development easier, or just making you feel like a wizard in the Webflow Designer, consider slinging a virtual coffee my way.
Think of it like buying me a pint for keeping your Webflow spells flowing.
You can support it here.
Cheers, legend!
This is a method based on community and soundness. If you can't afford it, don't worry... One of your fellow Webflow nerds has already helped you out by donating.