With geriatric Internet Explorer versions this site looks shite. This because Impossiblue is built with modern tools and would require hacks and workarounds to function in legacy browsers. I no longer have the patience nor the inclination to satisfy everybody. Impossiblue is an experiment and a playground – and my sustenance does not depend on it. As a concequence – to embarrass nobody – I have decided to lock you out. So, there.


A pure CSS modal window

Mouse over a bottle to see a scaling effect. Click or tap a bottle to open a modal window with nutrition facts.

In user interface design for computer applications, a modal window is a graphical control element subordinate to an application’s main window. It creates a mode that disables the main window, but keeps it visible with the modal window as a child window in front of it. Users must interact with the modal window before they can return to the parent application. This avoids interrupting the workflow on the main window. (Ref. 1)

Not to be confused with pop-up windows often misused for advertising and irrelevant and unwanted information, a modal window is perfect for keeping relevant information on the same page. Like a slideshow, for instance, first proposed by Lokesh Dhakar with his JavaScript based “lightbox” technique, later followed by a score of imitators and me-toos, of which maybe fancyBox maybe reigns maybe supreme … maybe.

Now, there is nothing wrong with JavaScript for solutions like this. JavaScript is even necessary for advanced implementations. The only catch is that it introduces what may be overkill for more simple and dreary needs. The challenge then is to rely on HTML and CSS alone. The :target pseudo-class to the rescue:

This pseudo-class matches an element that’s the target of a fragment identifier in the document’s URI. The fragmet identifier in a URI comprises a # character followed by an identifier name that matches the value of an id attribute of an element within the document. (Ref. 2)

Early on, only Firefox implemented :target. In other browsers it was either buggy or not supported at all. These days, it should work in most everything. What follows, is the (unstyled) HTML and CSS necessary to open (and close) a modal window:


<!-- Link to activate modal window -->
<a href="#modal">Open modal window</a>

<!-- START Modal window -->
<div id="modal">
	<p>Some text in modal window</p>
	<!-- New link: When another target is activated, 'modal' is no longer the target -->
	<a href="#">Close modal window</a>
	<!-- Note: If the modal window is not closed, it will stay open even on page reload -->
<!-- END Modal window -->


/* Hide modal window (aka 'target') when page first loads */
#modal { display: none; }

/* Show target when link is activated */
#modal:target { display: block; }

Note: The default behaviour of an anchor link is to (try to) jump to the specified anchor in the page; and it will succeed if the page height (or rather, amount of content) allows this. The resulting jump can be confusing on plain web pages, and with modal windows or lightboxes it is downright undesired. A fix for the latter implementations is to use position:fixed instead of position:absolute, as can be seen in the page source of this article. Blazemonger has a more detailed explanation over at Stack Overflow. He also chimes in with the following:

…adding another fixed target to a ‘close’ button on a modal keeps the page from scrolling when the modal is closed.

This, however, has not proved successful in the demonstration for this here article. When closing the modal window, the page jumps, so the jury is still out on that one. Yackety-yak.


1. Wikipedia
2. Olsson, Tommy, and Paul O’Brien, The Ultimate CSS Reference, SitePoint (2000)


Peter Collingridge’s SVG optimiser.


Impossiblue is not associated with Rob’s Really Good in any way. We haven’t even tasted their products. This web page is nothing but a proof of concept. So, there.

Nutrition facts
Nutrition facts
Nutrition facts
Nutrition facts
Nutrition facts