What is a non-Javascript overlay/float/pop-up called?

Forum Moderators: open

Message Too Old, No Replies

What is a non-Javascript overlay/float/pop-up called?

learnoverlay

7:36 pm on Jul 16, 2021 (gmt 0)

There's a type of floating pop-up that doesn't rely on Javascript, used on various popular websites. It shows a dialog box that overlays the main page. When the main page is scrolled, the dialog box remains in the same place in the browser window. To see examples of it, visit the home page of Serverfault using Firefox, or visit the home page of Stackexchange and click on any question. The dialog box is displayed regardless of whether Javascript is enabled in your browser, but in either case, you must first clear or disable cookies.

What's the technical term for that type of pop-up? How does it work?

not2easy

8:01 pm on Jul 16, 2021 (gmt 0)

It sounds like a modal overlay. Modals can be built without javascript even css can be used for that purpose. A floating pop-up sounds like a typical css modal.

All you would need to do is to use browser developer tools to examine the code and you can see how it is created.

Not the latest thing but you can see some examples here in our CSS forum: [webmasterworld.com...] and try them yourself.

NickMNS

9:53 pm on Jul 16, 2021 (gmt 0)

The trick to make this work without the use of JS is to use a check-box and then define a CSS style using the :checked pseudo-class to hide the element.
[developer.mozilla.org...]

Marshall

11:47 pm on Jul 16, 2021 (gmt 0)

What is a non-Javascript overlay/float/pop-up called?

ANNOYING!

learnoverlay

3:51 am on Jul 19, 2021 (gmt 0)

They're annoying, yes I agree. My reason for asking was that the ones I encountered can't be blocked by any known overlay/pop-up blockers (I tried 3 of them), so I wanted to investigate in order to figure out how to block them.

I found sample code on Github that demonstrates the blocker-resistant behavior that's so annoying:
[github.com...]

The technique is ancient (the sample code is more than seven years old), so I'm surprised that none of the various blockers were ever enhanced to block it.

learnoverlay

3:57 am on Jul 19, 2021 (gmt 0)

"found" -> by which I mean not2easy found it for me (thanks), and I followed the link. Sorry I'm a bit disorganized with keeping track of where my browser tabs come from. ;-)

EDIT a few minutes later:
The technique at the Github link does thwart the overlay blockers, but relies on Javascript. Later in the thread, birdbrain gave alternative examples, but the blockers successfully block them.

So, none of the sample code actually exhibits the behavior that Serverfault and Stackexchange do: non-Javascript overlays that thwart the overlay blockers.

not2easy

5:21 am on Jul 19, 2021 (gmt 0)

I cannot guess how javascript blockers could block css, but I imagine it is possible.

Examining the source code of a page and viewing the server response headers can show you everything that is loaded when a page is visited. Removing the things you are familiar with leaves a smaller set of elements to investigate. That is how you can determine methods.

learnoverlay

8:13 pm on Jul 19, 2021 (gmt 0)

Narrowed it down to this:


<html><head>
 <link rel="stylesheet" type="text/css" href="https://cdn.sstatic.net/Shared/stacks.css">
</head>
<body>
 <div class="ff-sans ps-fixed z-nav-fixed ws4 sm:w-auto p32 sm:p16 bg-black-750 fc-white bar-lg b16 l16 r16 js-consent-banner">
 <p>Un-blockable overlay</p>
 </div>
</body></html>

That css file is atrocious, though.

EDIT:

I cannot guess how javascript blockers could block css

Behind The Overlay is a blocker that successfully blocks birdbrain's CSS-only (no Javascript) overlays. But it fails to block the one I gave here.