lightbox

HTML

<div id="test">
    <strong>Hello World!</strong>
</div>

<div id="test2">
    <strong>Hello World How are you!</strong>
</div>

<input type="button" onclick="javascript:lightbox('#test')" value="Click Me"/>
<input type="button" onclick="javascript:lightbox('#test2')" value="Department Goals"/>

CSS

#box {
    background: red;
    width: 100px;
    height: 100px;
}

#lightbox {
	position: absolute;
	top: 0;
	left: 50%;
	width: 300px;
    padding: 15px;
	margin-left: -150px;
	background: #fff;
	z-index: 1001;
	display: none;
}

#lightbox-shadow {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #000;
	filter: alpha(opacity=75);
	-moz-opacity: 0.75;
	-khtml-opacity: 0.75;
	opacity: 0.75;
	z-index: 1000;
	display: none;
}

#test {
    display: none;
}
#test2 {
    display: none;
}


#goals-lightbox-content{display: none;}

JavaScript

$("#goals-click").click(function(){

   
		lightbox();
});



// display the lightbox
function lightbox(insertContent, ajaxContentUrl){

	// add lightbox/shadow <div/>'s if not previously added
	if($('#lightbox').size() == 0){
		var theLightbox = $('<div id="lightbox"/>');
		var theShadow = $('<div id="lightbox-shadow"/>');
		$(theShadow).click(function(e){
			closeLightbox();
		});
		$('body').append(theShadow);
		$('body').append(theLightbox);
	}
    
	// insert HTML content
	if(insertContent != null){
		$('#lightbox').append($(insertContent).show());
	}

	// insert AJAX content
	if(ajaxContentUrl != null){
		// temporarily add a "Loading..." message in the lightbox
		$('#lightbox').append('<p class="loading">Loading...</p>');

		// request AJAX content
		$.ajax({
			type: 'GET',
			url: ajaxContentUrl,
			success:function(data){
				// remove "Loading..." message and append AJAX content
				$('#lightbox').empty();
				$('#lightbox').append(data);
			},
			error:function(){
				alert('AJAX Failure!');
			}
		});
	}

	// move the lightbox to the current window top + 100px
	$('#lightbox').css('top', $(window).scrollTop() + 100 + 'px');

	// display the lightbox
	$('#lightbox').show();
	$('#lightbox-shadow').show();

}

// close the lightbox
function closeLightbox(){

	// hide lightbox and shadow <div/>'s
	$('#lightbox').hide();
	$('#lightbox-shadow').hide();
}


$(function() {
    $( "#tabs" ).tabs();
  });