<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
body, html {
margin:0;
padding;
height:100%
}
a {
font-size:1.25em;
}
#content {
padding:25px;
}
#fade {
display: none;
position:absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: #ababab;
z-index: 1001;
-moz-opacity: 0.8;
opacity: .70;
filter: alpha(opacity=80);
}
#modal {
display: none;
position: absolute;
top: 45%;
left: 45%;
width: 100px;
height: 100px;
padding:20px 15px 15px;
border: 3px solid #ababab;
box-shadow:1px 1px 10px #ababab;
border-radius:20px;
background-color: white;
z-index: 1002;
text-align:center;
overflow: auto;
}
#results {
font-size:1.25em;
color:red
}
</style>
<script>
function openModal() {
document.getElementById('modal').style.display = 'block';
document.getElementById('fade').style.display = 'block';
}
function closeModal() {
document.getElementById('modal').style.display = 'none';
document.getElementById('fade').style.display = 'none';
}
function loadAjax() {
document.getElementById('results').innerHTML = '';
openModal();
var xhr = false;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
}
else {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
if (xhr) {
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
closeModal();
document.getElementById("results").innerHTML = xhr.responseText;
}
}
xhr.open("GET", "load.jsp", true);
xhr.send(null);
}
}
</script
</head>
<body>
<div id="content">
<!--<a href="/articles/1506-how-to-display-image-spinner-ajax-request">Click here to return to the
tutorial.</a><br /><br /> <h2>Demo</h2> -->
<a href="javascript: void(0);loadAjax();">Click here to load get data via Ajax</a><br /><br />
<div id="results"><!-- Results are displayed here --></div>
<div id="fade"></div>
<div id="modal">
<img id="loader" style="width:95px;height:95px;border:0px;" src="loadImage.gif" />
</div>
</div>
</body>
</html>