A minimal modal? Ideally cross-platform, fast, and tiny.

minimal_modal.js

/* minimal_modal.js - http://gist.github.com/215401
 * Copyright (c) 2009 Chris Moyer (chris@inarow.net)  
 *
 * Usage:
 * modal.open('some html'); // Open a modal
 * modal.close();           // Close a modal
 *
 * No options or configuration.  It's minimal.  Take, edit, use.
 *
 * MIT (http://www.opensource.org/licenses/mit-license.php) licensed.
 */
var modal = (function () {
	var overlay_div, modal_div;

	function page_height() {
		if (window.innerHeight && window.scrollMaxY) { return window.innerHeight + window.scrollMaxY; }
		else if (document.body.scrollHeight > document.body.offsetHeight ) { return document.body.scrollHeight; }
		else { return document.body.offsetHeight + document.body.offsetTop; }
	}

	function close() {
		document.body.removeChild(overlay_div);
		document.body.removeChild(modal_div);
		return false;
	}

	function open(html) {
		overlay_div = document.createElement('DIV');
		overlay_div.style.cssText = "position: absolute; top: 0%; left: 0%; width: 100%; height: "+page_height()+"px; background-color: black; z-index:1001; -moz-opacity: 0.8; opacity:.80; filter: alpha(opacity=80);";
		document.body.appendChild(overlay_div);
	
		modal_div = document.createElement('DIV');
		modal_div.style.cssText = "position: absolute; top: 25%; left: 25%; width: 50%; height: 50%; padding: 0px; border: 2px solid #666; background-color: #fff; z-index:1002; overflow: auto; padding: 12px 2px 2px 2px;";
		modal_div.innerHTML = html;
		document.body.appendChild(modal_div);
	
		var a = document.createElement('A');
		a.innerHTML = 'X';
		a.setAttribute('href', '#');
		a.style.cssText = 'display:block; color: #000; background:#ccc; text-decoration: none; font-size: 12px; height: 12px; padding: 0px 1px 0px 2px; border: 1px solid #000';
		a.onclick = close;
	
		var x = document.createElement('DIV');
		x.appendChild(a);
		x.style.cssText = "position: absolute; right: 1px; top: 1px;";
		modal_div.appendChild(x);
	
		window.scrollTo(0,0);
	}

	return {open: open, close: close};
})();