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!

ROLLIN' DEEP.

At the outset of Harajuku, gangs of Japanese greasers gather in Yoyogi Park on Sunday afternoons to wrap their boots in electrical tape, pop in the oldies, and dance. It’s a pretty awesome sight and well documented in Peter Bjorn and John‘s “Nothing to Worry About” music video last year. These are the same dudes in the film, they’ve been keeping their passion for 1950s rockabilly afloat since the ’70s. The subculture eventually died out decades back, but the original crew is still pushin’ through, even though some are as old as your dad. They keep true to the culture also,.. they don’t necessarily appreciate the gawking tourists and aren’t doing this as a run-of-the-mill street performance. Basically, don’t mess with ’em. If you watch my Youtube clip, I even caught a little scuffle on tape between rival crews. So cool.