Create a modal window by calling openWindow(window-source,ID to give window,width,height). You can also call loadLib(src of JS Library) to activate a JavaScript file required by the code in the window.

modal-window.css

/* Z-Index of #mask must be lower than #boxes .window */
#mask{
	position:absolute;
	z-index:9000;
	background-color:#000;
	display:none;
}

#boxes .window{/* Setup all the defaults for the Modal Window */
	position:absolute;
	width:440px;
	height:200px;
	display:none;
	z-index:9999;
	padding:12px;
	background-color:#98D1EF;
	border:thin solid #666;
	-moz-border-radius: 12px; /* FF1+ */
	-webkit-border-radius: 12px; /* Saf3+, Chrome */
	border-radius: 12px; /* Opera 10.5, IE 9 */
}
#boxes .window .close{
	text-align:right;
	text-decoration:none;
	color:#900;
	float:right;
	display:block;
}
#boxes .window .ajax-loader{
	/*display:none;*/
	display:block;
	width:100px;
	height:100px;
	margin:0 auto;
}

modal-window.js

var cssDir = '/css/'
$(document).ready(function(){
	$('head').append(function(){
		var appendHTML = '<link rel="stylesheet" href="' + cssDir + 'modal-window.css" />';
		return appendHTML;
	})
})
function loadLib(lib){
	$('head').append(function(){
		var appendHTML = '<script type="text/javascript" src="' + lib + '"></script>';
		return appendHTML;
	});
}
function openWindow(href,contentid,width,height){
	var contentSelector = '#' + contentid;
	$('body').append(function(){
		var appendHTML = '<div id="boxes">' +
						'<div id="' + contentid + '" class="window">' +
						'<a href="#" class="close">[x]</a><br />' +
						'<img class="ajax-loader" align="middle" src="/assets/system-images/white-ajax-loader_big.gif" width="100" height="100" />' +
						'</div>' +
						'<div id="mask"></div>' +
						'</div>';
		return appendHTML;
	})
				
	// Get the screen height and width
	var maskHeight = $(document).height();
	var maskWidth = $(document).width();
	// Get the window height and width
	var winHeight = $(window).height();
	var winWidth = $(window).width();

	// Set height and width to mask to fill up the whole screen
	$('#mask').css({'width':maskWidth,'height':maskHeight});
	// Transition Effect
	$('#mask').fadeTo('slow',0.8);
	
	// Set the Width and Height of the window
	if(width != null){
		$(contentSelector).css('width',width);
	}if(height != null){
		$(contentSelector).css('height',height);
	}
	// Set the popup window to center
	$(contentSelector).css('top', winHeight/2-$(contentSelector).height()/2);
	$(contentSelector).css('left', winWidth/2-$(contentSelector).width()/2);
				
	// Transition effect
	$(contentSelector).fadeIn(2000);
	
	// Now we have to get the content
	$.ajax({
		url:href,
		success:function(data){
			$('.ajax-loader').fadeOut('fast');
			$(contentSelector).append(data);
		}
	});
	
	$('.window .close').click(function(e){
		// Cancel the link behavior
		e.preventDefault();
		$('#boxes').remove();
	});
	$('#mask').click(function(){
		$('#boxes').remove();
	});

}