This adds a loading screen for an ajax call

Loading Div

/* Some CSS */

.loading_div {
  background: white;
  opacity: 0.7;
  filter: alpha(opacity=70);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  text-align: center; }
  .loading_div div {
    width: 120px;
    margin-left: auto;
    margin-right: auto;
    text-align: center; }

// Some Javascript.  Make sure the target is 'position:relative'

function show_loading_page(target_id, text)
{
	var text = text || "Loading...";
	var loadingDiv = document.createElement('div');
	loadingDiv.className = "loading_div";
	var textContainer = document.createElement('div');
	textContainer.style.width = "100%";
	textContainer.innerHTML = '<center><p style="font-weight:bold;">'+ text+ '</p><img src="/images/icon_loading.gif"/></center>';
	loadingDiv.appendChild(textContainer);

	var target_container = document.getElementById(target_id);
	if (target_container)
	{
		target_container.appendChild(loadingDiv);
		textContainer.style.marginTop = ((target_container.clientHeight / 2 - 10) > 0) ? target_container.clientHeight / 2 - 10 + "px" : "0px";
	}
}
}
}