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!

THE X HUNDREDS :: LOOKING BACK // MOVING FORWARD

Sometimes Thanksgiving is anticlimactic. You eat a bunch of turkey, hear the same story told six times by your grandma, laze around in something with an elastic waistband, but then what? Oh nothing, just the chance to win tickets to our ten year anniversary party at the “Happiest Place on Earth.” Here’s how:

Post feasting, starting at midnight (tonight, which is technically Black Friday), we will draw lineups at The Hundreds Los Angeles, The Hundreds San Francisco, and The Hundreds Santa Monica. Buy anything in the shop and you’ll get one free ticket to “LOOKING BACK / MOVING FORWARD” (taking place the following week), while supplies last. Remember, you gotta be 18 or older, and the tickets are non-transferable. That’s it. Now you just have to stay up until midnight. Happy Thanksgiving!