Category: modal

Sticky as a Local Fixed?

Lemme set the stage a bit here. You have a website and, like most, it scrolls. This website will have modals. You’ll probably position: fixed the modal so that it’s predictably positioned regardless of scrolling. It’s possible the modal itself will scroll. Notice the modal has a close button. We ca...

Considerations for Styling a Modal

A modal. A small box that pops up to tell you something important. How hard can it be? Wellllll. Medium hard, I’d say. There’s quite a few considerations and a few tricky things to get just right. Let us count the ways. Where in the DOM? I typically plop a modal’s HTML before the closing </body>...

Modaal

Modaal is a WCAG 2.0 Level AA accessible modal window plugin. Modals seem so hard to get right from an accessibility perspective, I’m not proud to say I’ve never tried. Something like moving focus to the modal when it opens and moving focus back to where it was when the modal closes seems like a particular...

CSS Overlay Techniques

Design patterns, a set of best practices and techniques that aim to solve some of the most common design “problems”, are usually presented in the context of design principles. One of these design principles is the “Stay On Page” principle. This principle is based on the fact that page refreshes are disrupti...