Playing With Modal-like Overlay-like Things

Sometimes there is content that you genuinely want to hide until the user decides it is worthwhile to show. You don't want to do this when it involves downloading stuff the user may never see, as that is wasted bandwidth.

In this case, let's embed a map. Maybe your client wants it hidden until the user acts. I need to choose an address, then try my hand at the inline button instead of, or in addition to, the thinger at the top.

Also, you want it to be keyboard navigable, not be in the tab order when it's hidden, and still allow the map to render. Frankly, Karl Groves has a much better, more well-thought-out block of code in his Accessible vanila JS dialog.

This Place's Location Map Box Thinger

It's also fair to say that there will probably be content below the box. This is more relevant when looking in a "mobile" view as this will function like an expando instead of as an overlay. Here's a link I've never visited.