As mentioned in a previous post, I’m a big fan of displaying small, configuration style screens in Lightbox style windows. If you’re not familiar with Lightbox, check it out here.

The thing with configuration screens is they usually have a little more to do than simply display an image or other static content. In fact, most of the ones I’ve written require some sort of AJAX functionality. Using an iframe is perfect for these scenarios as they operate as a self contained window, complete with any custom JavaScript.

I began using Cody Lindley’s ThickBox and more recently DOMWindow to load my iframes dynamically. Whist both of these plugins are great, I found they lacked the ability to truly style the boxes and extending them to add callbacks and extra features was not possible without editing the core JavaScript. I was after a simple yet expandable solution to dynamically open an iframe in a Lightbox style window.

Boxen

The boxen plugin allows you to bind a click event to any element that will open a Lightbox style iframe.

Example

    $('.boxen').boxen();
    $('#boxen_google').boxen('http://www.google.com/');
    $('#boxen_search').boxen('http://www.google.com/search', {
        urlParams: {
            q: 'More Cowbell'
        }
    });

Documentation

boxen([url or options], [options])

Arguments

url or options (optional) – String, Options

If the first parameter is a string, it is used as the URL for the iframe source. Otherwise, it is treated as the options map.

options (optional) – Options

urlParams: {},
showTitleBar: true,
showCloseButton: true,
title: null,
titleAttribute: 'title',
closeButtonText: null,
width: 600,
height: 500,
url: null,
urlAttribute: 'href',
overlayOpacity: 0.8,
overlayColor: null,
modal: false,
postOpen: function(contentAreaElement) {},
postClose: function() {}

Demo

Boxen Demo

Download

UPDATE 2009-03-20

Boxen now has the ability to open an empty canvas. Simply cancel out any URL by setting the url or urlAttribute options to null. See the demo page for a nifty Google Maps example.

UPDATE 2009-04-06

Boxen 1.2 is now IE6 compatible. Due to the lack of position: fixed, the experience may be a little jerky / flickery when the window is resized and occasionally the transparent overlay may be a few pixels too long or too short however I think this is a case of “near enough is good enough”.

Unfortunately, I’ve had to alter the Boxen “id” attribute naming convention and remove the leading underscore to get it to work in IE6. If you’ve used any custom CSS rules, you’ll need to edit them accordingly.

Also fixed in this version:

  • BIG iFrame implementation for overlaying IE6 form controls
  • Safari iFrame ID caching bug
  • Opera opacity issue

I’ve only tested this using a STRICT doctype and encourage everyone else to do so too.

UPDATE 2009-10-08

Boxen 1.3 contains the following updates:

  • Fixed “frameBorder” case sensitivity (thanks Caleb)
  • Added more streamlined way to anonymously open a Boxen window 
    $.Boxen.open(null, {
    url:'http://www.google.com/',
    title:'Boxen window title'
});
  • Now released under the MIT license

UPDATE 2009-11-30

Boxen 1.4 contains the following updates

  • Added “overlayColor” option
  • Stylesheet example now includes a “spinner” loading animation (courtesy of http://www.ajaxload.info/). Provided your iFrame / content specifies a background, the spinner will not be visible once the content loads