KoderyBeta

Simple Modal Box

Category: jQuery - Owner: PaulDavis - Owner ID: 1

Simple jQuery Modal Box

The commented out HTML is what I'm loading into it, the link with the ID of 'modalClose' is the only bit needed for functionality.

$("#theWorkWeDoBubbles li a[href!=#]").click(function(){
	$('body').append('<div id="modalBg"></div>');
	$('#modalBg').delay(150).fadeIn(150).append('<div id="modalInnerSmall"></div>').css("height",$(document).height());
	$("#modalInnerSmall").load($(this).attr('href')).delay(250).fadeIn();
	return false;
});
$("#modalClose").live('click', function(){
	$("#modalBg").fadeOut('slow', function(){
		$("#modalBg").remove();
	});
	return false;
});

/*
<div id="theModalTitle">
	<h3>Main Title</h3>
</div>
<div id="theModalContent">
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
</div>
<a href="#" id="modalClose">Close</a>
*/