Impossiblue

A pure CSS modal window

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:

The HTML

<!-- 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 -->
</div>
<!-- END Modal window -->

The CSS

/* 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.

References

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

Johnny-on-the-spot

Peter Collingridge’s SVG optimiser.

Disclaimer

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.