When should web designers use modal overlays?


Originally published at: http://boingboing.net/2017/03/30/never-ever-ever.html


I agree, don’t do it. But maybe mention that to the BB store

<img src="//discourse-cloud-file-uploads.s3-us-west-2.amazonaws.com/boingboing/original/3X/6/e/6ef3c7b635e9704379d96884ecb28270bd3f05c5.png" width=“690” height=“447”>


Modal pop-ups sometimes remove the page’s scroll bar – is there a way, with uBlock, to block the element and get the scroll bar back?


In my experience, the modals are put on a full screen layer over everything, like saran wrap. Block the layer, and you block the modal, and can access everything underneath, including the scroll bar.


When that happens, yes, easy enough. My local paper keeps popping up a survey (with prizes!), which removes the scroll bar entirely.


Modals can make sense for almost any sort of complex input. They become an annoyance when their creation is not user driven and obviously linked to some larger task. I use em a fair bit in programming pages with complex business logic (they are built into our framework and are used to edit aspects of customizable data display, among other things). But that’s information people are PAYING to manage, not advertising!


From the element picker page:

Once you click on the element, you will be presented with a modal dialog box…


Sometimes they will disable the scrollbar by tossing a new css rule in when the modal pops up. Usually its an “overflow: hidden” on the html or body tag. That’s what WIRED magazine does to get you to turn off your adblocker,

Fuck “turn off your adblocker” modals. Half of em are so easy to defeat, it could be coded into the adblocker.


My company makes EHR systems. Modal dialogs make sense for complex workflows where unexpected conditions can require extra input.

I use some other enterprise apps that try to emulate desktop windowed apps. This is dumb, and clunky.


In that case, you might need to resort to something that lets you specify your own css for a particular page, like Greasemonkey or Tampermonkey. Probably way more than the average user would ever want to go, though.

I would just stop going to websites that do that sort of BS.


The solution for this one is going to be a bit more complicated. You could solve this discreet problem, as we did with popup windows of yore. Of course, modal overlays are the popup windows for today’s hip windowless crowd. To solve this one permanently, I’m afraid you may have to convince your local paper to go non-profit. Sound like a big lift, I know, but is arguably easier than trying to get advertisers to be less annoying and intrusive.


I’m sort of irritated by people trying to gate their sites with html tags.

When a site has a nice box saying, “Please considering donating if you like our content.” I do consider it. When a site is like, “haha, locked you out unless you disable ad blocker” and all I have to do is edit an html tag to circumvent it, I’m very inclined to do so. Somethow making it into an adversarial thing doesn’t make me want to work with them.


That’s what those are called?

All I know is that they break LastPass from automatically logging into sites. I can work around it, but it’s too confusing for my parents who have gotten used to “click the site in LastPass and you’ll go to the page you want all logged in and ready”.


tl;dr; for the article: in order to effectively use modals use basic internet decency. only have a user initiate a modal, and make it clear that that’s what will happen, only use them when it’s helpful to the user, and let them easily close it (plus some mobile-specific tips) Basically, advice for people who weren’t abusing modals in the first place. Advertisers are breaking all these rules on purpose.


oh, you mean, like these…


Fuck those modals that automatically reposition themselves to try to stay centered in your screen so when you try to pan around on your phone looking for the “X” or even “OK” in a modal that’s too big it follows you.

And since I suspect this post has the attention of a few web designers I’d like to take this opportunity to mention another pet peeve of mine. Can you please, please fix credit card entry forms so they don’t care if your number has dashes or spaces or dots or pile of shit emojis separating the quartets? There’s no reason why they should only allow entries with only numbers.


The worst ones that I have seen are the modals for the mobile versions of sites, that invariably pop up when you’re 2/3rds done reading the article, and force you to scroll back up to the top of the page to press the X to close them, and half of the time, pressing the X actually activates the link to the ad or whatever it is that is annoying you. And, of course, there’s no such thing as a browser extension for Chrome for Mobile.


The ones I find most irritating are the ones that prompt me to sign up for the email newsletter the first time I visit the site, before I even see the content I came to see.


Actually, that’s not true. Marketing people say that all the time. I know because I’ve been on the receiving end of being told to make one all the time.