<HTML>
<HEAD>
<TITLE>Popup div with disabled background</TITLE>
<style>
.ontop {
z-index: 999;
width: 100%;
height: 100%;
top: 0;
left: 0;
display: none;
position: absolute;
background-color: #cccccc;
color: #aaaaaa;
opacity: .4;
filter: alpha(opacity = 50);
}
#popup {
position: absolute;
color: #000000;
/* To align popup window at the center of screen*/
top: 50%;
left: 50%;
}
</style>
<script type="text/javascript">
function pop(div) {
document.getElementById(div).style.display = 'block';
}
//call this method when this have to close
function hide(div) {
document.getElementById(div).style.display = 'none';
}
window.setTimeout("hide('popDiv')",10000);
</script>
</HEAD>
<BODY>
<div id="popDiv" class="ontop">
<div id='popup'> <img id="img-spinner" src="https://raw.githubusercontent.com/niklausgerber/PreLoadMe/master/img/status.gif" alt="Loading"/> </div>
</div>
<a href="#" onClick="pop('popDiv')">open</a>
</BODY>
</HTML>
<HEAD>
<TITLE>Popup div with disabled background</TITLE>
<style>
.ontop {
z-index: 999;
width: 100%;
height: 100%;
top: 0;
left: 0;
display: none;
position: absolute;
background-color: #cccccc;
color: #aaaaaa;
opacity: .4;
filter: alpha(opacity = 50);
}
#popup {
position: absolute;
color: #000000;
/* To align popup window at the center of screen*/
top: 50%;
left: 50%;
}
</style>
<script type="text/javascript">
function pop(div) {
document.getElementById(div).style.display = 'block';
}
//call this method when this have to close
function hide(div) {
document.getElementById(div).style.display = 'none';
}
window.setTimeout("hide('popDiv')",10000);
</script>
</HEAD>
<BODY>
<div id="popDiv" class="ontop">
<div id='popup'> <img id="img-spinner" src="https://raw.githubusercontent.com/niklausgerber/PreLoadMe/master/img/status.gif" alt="Loading"/> </div>
</div>
<a href="#" onClick="pop('popDiv')">open</a>
</BODY>
</HTML>
