When should web designers use modal overlays?

"This web page needs to be interrupted by a lightbox effect and a modal dialog asking me to sign up for a mailing list," said no one ever.

If you really must create a modal popup dialog (seriously, don't do this), Autodesk's Naema Baskanderi has some best practices to follow.

Meanwhile, if you're on the browsing side and you're looking for some self-help measures, I recommend uBlock Origin's element picker, which lets you select parts of webpages and block them permanently — I use it to kill those bars across the tops and bottoms of pages that display navigation and graphics, obscuring the text as you scroll.

OK, yes, there are times when modals make sense (compose new tweet comes to mind), but if the web has a bigger annoyance than this (apart, possibly, from autoplay video), I don't know what it is.


When creating modals remember to add in keyboard accessibility. Consider the following:

Opening modal — The element which triggers the dialog must be keyboard accessible

Moving focus into the Dialog — Once the modal window is open, the keyboard focus needs to be moved to the top of that

Managing Keyboard Focus — Once the focus is moved into the dialog, it should be "trapped" inside it until the dialog is closed.

Closing the Dialog — Each overlay window must have a keyboard accessible control to close that window.

Best Practices for Modals / Overlays / Dialog Windows
[Naema Baskanderi/UX Planet]

(via 4 Short Links)