ChrisBosco: OpenBox

OpenBox

A wide-open solution for in-page popups

Overview

OpenBox is an in-page popup window that allows you to present your web page's content in a dynamic, flexible, and interesting way. It is built with unobtrusive Javascript and powered by the lightweight Mootools framework.

Last update: 3/15/2008

Examples

The Infamous Lorem Ipsum!!

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum quis ipsum. Duis vehicula mauris a risus. Nulla facilisi. Nulla lobortis. Aenean sagittis nunc vel elit. Vestibulum felis. Donec commodo. Aliquam libero lectus, mollis ac, mattis et, varius vitae, quam. Maecenas id lorem. Integer dignissim diam sed mi.

In sit amet nisi. Nulla sed ligula nec nibh facilisis posuere. Pellentesque tellus. Quisque feugiat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum euismod. Aenean facilisis, est a imperdiet iaculis, ante sapien ullamcorper leo, id mattis mauris risus eget sem. Sed pellentesque euismod diam. Sed non massa. Nam diam magna, varius vel, fermentum eu, consectetuer ut, erat. Curabitur semper velit at augue. Pellentesque vulputate pulvinar massa. Pellentesque imperdiet felis sed erat. Aenean venenatis, mauris a volutpat porttitor, erat nisi pretium leo, a bibendum augue augue non leo. Aliquam libero.

Vivamus lacus. Maecenas purus lorem, mollis eu, faucibus ac, pharetra non, odio. Duis in quam. Nulla sed mauris eget ligula feugiat facilisis. Nullam eu lectus. Duis sagittis mauris eu felis. Nulla facilisi. Donec ultrices. Integer felis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis auctor nibh id risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque consequat ullamcorper felis. Curabitur sodales. Nunc euismod eros accumsan dolor. Duis porta risus ac magna. Nullam tincidunt, mi id ultrices gravida, ligula sem tincidunt sem, vitae varius nulla purus vitae mi. Phasellus vitae nunc sed massa ullamcorper bibendum.

Morbi tempus neque id leo. Cras nisl. Donec purus sapien, gravida vel, porta sed, cursus in, purus. In pellentesque nunc id nisi. Donec porttitor fringilla erat. Phasellus pellentesque, ligula at aliquam scelerisque, augue velit consequat elit, in elementum pede orci at leo. Suspendisse potenti. Aliquam est. Vivamus laoreet ipsum at ligula. Maecenas sit amet elit. Praesent tempor, dolor sit amet mollis auctor, lorem risus luctus tellus, at luctus est odio ut orci. Duis egestas mauris eu urna. Nulla blandit. Nam nunc dui, vulputate vitae, ultrices eget, cursus nec, elit. Pellentesque risus nibh, sagittis id, blandit nec, tincidunt eu, leo.

The Infamous Lorem Ipsum!!

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum quis ipsum. Duis vehicula mauris a risus. Nulla facilisi. Nulla lobortis. Aenean sagittis nunc vel elit. Vestibulum felis. Donec commodo. Aliquam libero lectus, mollis ac, mattis et, varius vitae, quam. Maecenas id lorem. Integer dignissim diam sed mi.

In sit amet nisi. Nulla sed ligula nec nibh facilisis posuere. Pellentesque tellus. Quisque feugiat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum euismod. Aenean facilisis, est a imperdiet iaculis, ante sapien ullamcorper leo, id mattis mauris risus eget sem. Sed pellentesque euismod diam. Sed non massa. Nam diam magna, varius vel, fermentum eu, consectetuer ut, erat. Curabitur semper velit at augue. Pellentesque vulputate pulvinar massa. Pellentesque imperdiet felis sed erat. Aenean venenatis, mauris a volutpat porttitor, erat nisi pretium leo, a bibendum augue augue non leo. Aliquam libero.

Vivamus lacus. Maecenas purus lorem, mollis eu, faucibus ac, pharetra non, odio. Duis in quam. Nulla sed mauris eget ligula feugiat facilisis. Nullam eu lectus. Duis sagittis mauris eu felis. Nulla facilisi. Donec ultrices. Integer felis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis auctor nibh id risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque consequat ullamcorper felis. Curabitur sodales. Nunc euismod eros accumsan dolor. Duis porta risus ac magna. Nullam tincidunt, mi id ultrices gravida, ligula sem tincidunt sem, vitae varius nulla purus vitae mi. Phasellus vitae nunc sed massa ullamcorper bibendum.

Morbi tempus neque id leo. Cras nisl. Donec purus sapien, gravida vel, porta sed, cursus in, purus. In pellentesque nunc id nisi. Donec porttitor fringilla erat. Phasellus pellentesque, ligula at aliquam scelerisque, augue velit consequat elit, in elementum pede orci at leo. Suspendisse potenti. Aliquam est. Vivamus laoreet ipsum at ligula. Maecenas sit amet elit. Praesent tempor, dolor sit amet mollis auctor, lorem risus luctus tellus, at luctus est odio ut orci. Duis egestas mauris eu urna. Nulla blandit. Nam nunc dui, vulputate vitae, ultrices eget, cursus nec, elit. Pellentesque risus nibh, sagittis id, blandit nec, tincidunt eu, leo.

The Infamous Lorem Ipsum!!

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum quis ipsum. Duis vehicula mauris a risus. Nulla facilisi. Nulla lobortis. Aenean sagittis nunc vel elit. Vestibulum felis. Donec commodo. Aliquam libero lectus, mollis ac, mattis et, varius vitae, quam. Maecenas id lorem. Integer dignissim diam sed mi.

In sit amet nisi. Nulla sed ligula nec nibh facilisis posuere. Pellentesque tellus. Quisque feugiat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum euismod. Aenean facilisis, est a imperdiet iaculis, ante sapien ullamcorper leo, id mattis mauris risus eget sem. Sed pellentesque euismod diam. Sed non massa. Nam diam magna, varius vel, fermentum eu, consectetuer ut, erat. Curabitur semper velit at augue. Pellentesque vulputate pulvinar massa. Pellentesque imperdiet felis sed erat. Aenean venenatis, mauris a volutpat porttitor, erat nisi pretium leo, a bibendum augue augue non leo. Aliquam libero.

Vivamus lacus. Maecenas purus lorem, mollis eu, faucibus ac, pharetra non, odio. Duis in quam. Nulla sed mauris eget ligula feugiat facilisis. Nullam eu lectus. Duis sagittis mauris eu felis. Nulla facilisi. Donec ultrices. Integer felis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis auctor nibh id risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque consequat ullamcorper felis. Curabitur sodales. Nunc euismod eros accumsan dolor. Duis porta risus ac magna. Nullam tincidunt, mi id ultrices gravida, ligula sem tincidunt sem, vitae varius nulla purus vitae mi. Phasellus vitae nunc sed massa ullamcorper bibendum.

Morbi tempus neque id leo. Cras nisl. Donec purus sapien, gravida vel, porta sed, cursus in, purus. In pellentesque nunc id nisi. Donec porttitor fringilla erat. Phasellus pellentesque, ligula at aliquam scelerisque, augue velit consequat elit, in elementum pede orci at leo. Suspendisse potenti. Aliquam est. Vivamus laoreet ipsum at ligula. Maecenas sit amet elit. Praesent tempor, dolor sit amet mollis auctor, lorem risus luctus tellus, at luctus est odio ut orci. Duis egestas mauris eu urna. Nulla blandit. Nam nunc dui, vulputate vitae, ultrices eget, cursus nec, elit. Pellentesque risus nibh, sagittis id, blandit nec, tincidunt eu, leo.

Full-sized example image

How to Use OpenBox

1. Download, Host, and Include OpenBox

First, download the required OpenBox files. Next, host them in the same directory as your webpage. Finally, include the following files in the <HEAD> tag of your webpage:

  1. Mootools v1.11
    Tip: Google now hosts many Javascript toolkits, including mootools.
  2. openbox.css
  3. openbox_inside.js or openbox_outside.js
    Depending on your method of use, explained below.

2. Configure OpenBox

This section is optional. If you just want to get up and running with OpenBox, it comes pre-configured with default settings.

Presentation: openbox.css

Just about all of the presentational aspects of OpenBox can be configured in this CSS file: colors, border size, and even "close" and "resize" images. OpenBox is designed with the web designer in mind, thus visual styles can be configured in a familiar CSS interface.

Behavior: popup_inside.js and popup_outside.js

Both of these Javascript files contain the global configuration of OpenBox:

mins: {width: 310, height: 140},	// minimum popup size (px)
resizableDefault: true,			// resizable by default?
movableDefault: true,			// movable by default?
handleModals: true,			// allow modal dialog?
useEffects: true,			// use transition effects?
transTime: {open: 800, close: 200},	// time (ms) for effect transitions (only applies if useEffects is true)
showLabels: true			// display labels on move, resize, and close controls?

For example, if you want very few of your OpenBox windows to be resizable, you may want to change resizableDefault to false.

3. Build your page with OpenBox

Calling an OpenBox

Any <A> tag can call an OpenBox. Just include "boxlink" in its class attribute and specify any further (optional) configuration in its type attribute with a comma-separated list of any or all of the following attributes:

x, y, width, height
Coordinates of the OpenBox: Set any of these to a number and it will set that coordinate or dimension in pixels.
i.e. "x: 0, y: 0" will make an OpenBox appear at the top left corner of the screen.
name
OpenBox Name: This will be displayed on the top of the OpenBox window.
modal
Modal Dialog: True or false, will the OpenBox be a modal dialog? If so, the rest of the page is dimmed and cannot be interacted with until the OpenBox is closed.
resizable, movable
OpenBox Control: True or false, is the OpenBox resizable and/or movable?

Here is an example of an <A> tag that calls an OpenBox. You may notice the href attribute is missing; we'll get to that next.

<a class="boxlink" type="width: 500, height: 400, name: Hello World!, resizable: false">
	Click here
</a>

Filling an OpenBox — 2 Ways

The next steps show how to link your content to OpenBox and they depend on whether you are using the inside or the outside version of OpenBox.

Choose inside if you prefer to keep all of your OpenBox-linked content on the same page, and choose outside if you'd prefer to open content from other web pages with OpenBox. Inside is the simpler solution, and should probably be chosen when possible.

Linking to inside content

First, include the javascript file, openbox_inside.js, in your HTML page.

Next, set up an in-page bookmark for each OpenBox, so that the <A> tag that calls the OpenBox has an href to the name of another <A> tag near the content you want to link to.

Finally, surround this content in a container with an id based on its <A> tag's name. The id will be the <A>'s name plus the word, "Content."

Here is an example of putting it all together:

<a href="#myTarget" class="boxlink">Click to see my target</a>
	...	
        
<a name="myTarget"></a>
<div id="myTargetContent">
	Here lies my content to display via OpenBox!
</div>

Tip: When Javascript is unsupported, the content linked to OpenBox will display all the time, so its location in the page is important. You may want to disable Javascript in your browser when designing your page to ensure that this content appears in proper context to those without Javascript support.

Linking to outside content

First, include the javascript file, openbox_outside.js, in your HTML page.

Next, set the href of your OpenBox-enabled link to point directly to the page with the content you wish to include. When this link is clicked, OpenBox will fetch that page via an asynchronous request and present the entire contents of its <BODY> tag. For all intents and purposes, this content becomes part of the page using OpenBox and will use all of its CSS, script, and so on.

Here is an example:

<a href="/myOtherPage.html" class="boxlink">Click to see my outside content</a>

Tip: When Javascript is unsupported, the OpenBox links will behave just like regular links. The user will leave the page by default, so you may want to include stylesheets on these pages for users without Javascript support.

Download OpenBox

Download all of OpenBox in one zip file: openbox.zip

or

Download individual OpenBox files: