Anchor example

This modal can be opened by clicking the anchor icon in the pre-header. Because the link uses an href anchor (instead of data-open-modal) you'll see #example_modal in your address bar. If you want to see the hidden modal, manually change the url in your address bar to #hidden_modal.

data-open-modal example

This modal can be opened by clicking the window icon in the pre-header. Because the link uses data-open-modal (instead of an href anchor) nothing appears in the address bar. You also can't use the back/forward buttons to close or reopen the modal. However, if you know the ID of the modal, you can still manually type the anchor link in your address bar and it will open (handy for client previews).

To simulate an extremely long modal and show how modals scroll, here's a ton of lorem ipsum:

Welcome!

Happy #MindBodyFlow Summer!

Happy #MindBodyFlow Summer!

July 12, 2016

Enter for a chance to win the ultimate weekend of wellness in Oahu, Hawaii. Join in the celebration with Josh Donaldson by showing us how you have fun finding your Flow and sharing it with #MindBodyFlow & follow @flowwater on Instagram.

Like this post? Follow @flowwater on Instagram to get more inspiration for living a healthy, positive lifestyle.