veneer: a lightbox (uses MooTools)

veneer.css

.veneer_overlay {
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  background-color: black;
  z-index: 1001;
  -moz-opacity: 0.5;
  opacity: 0.5;
  filter: alpha(opacity=50);
  cursor: pointer;
}
 
.veneer_dialog {
  position: absolute;
  padding: 16px;
  background-color: white;
  z-index: 1002;
  overflow: auto;
}

veneer.js

var veneer = (function() {
  var self = {};

  function add_observer(overlay) {
    overlay.addEvent("click", function() {
      self.close();
    });
  }

  function resize(dialog, width, height) {
    var window_size = window.getSize();
    width = Math.min(width, window_size.x - 20);
    height = Math.min(height, window_size.y - 20);
    dialog.setStyles({
      width: width,
      height: height,
      left: (window_size.x - width) / 2.0,
      top: (window_size.y - height) / 2.0
    });
  }

  self.open = function(element, width, height) {
    element = element.clone();

    var body = document.getElement("body");

    var dialog = new Element(".veneer_dialog");
    element.inject(dialog);
    dialog.inject(body);

    var overlay = new Element(".veneer_overlay");
    overlay.inject(body);

    resize(dialog, width, height);
    add_observer(overlay);
  };

  self.close = function() {
    document.getElement(".veneer_dialog").dispose();
    document.getElement(".veneer_overlay").dispose();
  }

  return self;
}());