I'm encountering an issue with closing a modal that I've created in JavaScript. The goal is to display a loading spinner while data is being fetched, and then hide it once the background process is complete. Everything functions correctly until the point where I attempt to hide it. No matter what I do, it just remains on screen...
https://i.sstatic.net/BLAmu.png
JavaScript for displaying/hiding the loading spinner:
<style type="text/css">
.modal
{
position: fixed;
top: 0;
left: 0;
background-color: black;
z-index: 99;
opacity: 0.8;
filter: alpha(opacity=80);
-moz-opacity: 0.8;
min-height: 100%;
width: 100%;
}
.loading
{
font-family: Arial;
font-size: 10pt;
border: 5px solid blue;
width: 200px;
height: 100px;
display: none;
position: fixed;
background-color: white;
z-index: 999;
}
</style>
<script type="text/javascript">
function ShowLoadingSpinner()
{
var modal = $('<div />');
modal.ID = "loadingCircle2";
modal.addClass("modal");
$('body').append(modal);
var loading = $(".loading");
var top = Math.max($(window).height() / 2 - loading[0].offsetHeight / 2, 0);
var left = Math.max($(window).width() / 2 - loading[0].offsetWidth / 2, 0);
loading.css({ top: top, left: left });
loading.show();
}
function HideLoadingSpinner()
{
var loadingCirlce = $find("loadingCircle2");
loadingCirlce.hide();
}
</script>
Backend code to handle showing/hiding:
ScriptManager.RegisterStartupScript(this, this.GetType(), "Show Me", "setTimeout('ShowLoadingSpinner()', 10);", true);
ScriptManager.RegisterStartupScript(this, this.GetType(), "Hide Me", "setTimeout('HideLoadingSpinner()', 0);", true);