Smoothbox

The problem it solved

In 2007 a site chose one JavaScript library and stayed with it. Thickbox, written by Cody Lindley, was the modal box that could show all five kinds of content, but it ran on jQuery. If your site was built on MooTools, using Thickbox meant loading a second framework for a single feature. Smoothbox removed that choice.

The port kept Thickbox's markup and behaviour, so its documentation still applied. The original announcement, in French on 17 March 2007, says the code was trimmed, a few bugs were fixed and a fade was added when the box opens. It worked in every browser of the day except Konqueror, and it degraded cleanly: with JavaScript off, each link still went straight to its image or page.

How it was used

You loaded MooTools, smoothbox.js and smoothbox.css, then marked up ordinary links. These examples are from the original demo page:

<a href="images/single.jpg" title="add a caption to title attribute / or leave blank" class="smoothbox">
  <img src="images/single_t.jpg" alt="Single Image"/></a>

<a href="images/plant1.jpg" class="smoothbox" rel="gallery-plants">…</a>
<a href="images/plant2.jpg" class="smoothbox" rel="gallery-plants">…</a>

<a href="#TB_inline?height=300&width=300&inlineId=myOnPageContent" class="smoothbox">Show</a>

<a href="ajaxOverFlow.htm?keepThis=true&TB_iframe=true&height=250&width=400" class="smoothbox">Example 1</a>

A shared rel value turned images into a gallery with next and previous links. Everything else was configured through the link's own address: TB_inline pointed at a hidden element on the page, TB_iframe=true loaded the target in an iframe, and height and width sized the box. The demo files it opened, ajaxOverFlow.htm and ajaxLogin.htm, were tiny HTML pages; old links to them now land here.

Version history

• 17 March 2007. First release, at labs.gueschla.com/smoothbox/.
• 15 May 2007. The date on the Smoothbox page at gueschla.com/labs/smoothbox/, which took over from the subdomain.
• 12 June 2007. Fixes a flicker each time a page loaded inside the iframe box, starting from a patch a reader posted in the comments.
• 16 August 2007. The stylesheet becomes fully valid CSS. Opacity moves into the script, and an Internet Explorer hack switches from _attribute to * html.
• 23 June 2008. A new smoothbox.js for MooTools 1.2, with the old file kept for 1.1 sites. A follow-up note on the page warned that the new version was "all messed up" in Internet Explorer and that the older one was safer for now.

What replaced it

The browser does this now. The <dialog> element, opened with showModal(), puts content in a layer above the page, dims everything behind it through the ::backdrop pseudo-element, makes the rest of the page inert, closes on the Escape key and returns focus where it came from. It has worked in Chrome, Edge, Firefox and Safari since March 2022. The fade Smoothbox added by hand is a few lines of CSS transition.

dialog.htmlclose

This box is a plain <dialog>. The dimmed page behind it is ::backdrop, the fade is a CSS transition, and Escape closes it without any extra code.

In 2007 the same effect needed a framework, a plugin and a careful look at Internet Explorer 6.

Image galleries are the one part that still takes some script, since the browser has no built-in previous and next. Even there, a dialog and a handful of event listeners do what used to need a plugin.

Where the code is now

The original page offered three downloads: smoothbox.js, smoothbox.css and loading.gif. They are not hosted here. A 2026 search found no repository for Smoothbox from its author. A copy did travel inside a third-party WordPress plugin called ThickBox, whose listing on wordpress.org still mentions "SmoothBox v20080623" and has not been updated since 2014.