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!

PARTY PEOPLE.

Our family over at Livestock threw a lil’ block party of their own this past Sunday in beautiful Vancouver, Canada. And by “lil,” I mean that there were so many people there, that you were probably there and didn’t even realize it. It basically jump-kicked our block party in the face with soccer cleats on. Anyways, Livestock also used the event to introduce their collaborative projects with RMK (Rick Klotz’s new offshoot), write-left, brknhome, and us. Yo Garry, next year we’ll be there. Swear!