Static Examples
Dynamic Examples
How to Use the Script:
- Copy the script and paste it just before the closing </body> tag. <script async src="https://cdn.jsdelivr.net/gh/jeminids/webflow-codes@popup-v4.0/popup.min.js"></script>
- There are three main elements: open trigger, close trigger, and the popup itself. it can be div, a, button, etc.
- To set the open trigger, add an attribute: popup-open=nth, replacing 'nth' with the number of your popups on one page. For example, if you have 2 popups, set the open triggers as popup-open=1 and popup-open=2
- Similarly, set the close trigger by adding an attribute: popup-close=nth. The rule is the same as the open trigger.
- Design your popup, after you're done, add a combo class like "is-hidden" and set it to be hidden (the class name isn't important here). Finally, add the attribute popup-item=nth to the popup element. Again, the rule matches the open and close triggers.
- For the dynamic, use Slug for the nth instead.