Here is a DIV container that serves as a transparent background with a loading message.
This is the HTML code for the DIV container:
<div id="generatingexcel" style="display:none; position: fixed; width: 100%;height: 100%; z-index: 999; top: 0; left: 0; background:rgba(25, 25, 25, 0.5);">
<div style="color: #fff; font-size: 24px; position: absolute; left: 500px; top: 400px;">
<strong>Generating Excel Please wait....</strong>
</div>
</div>
When making an ajax call, the first step in the success function of the ajax call is to set the Transparent DIV display property to 'block'. Once the execution is complete, the display property will be set back to 'none' for the Transparent DIV.
$("#generatingexcel").css("display", "block");
$.ajax({
type : "GET",
url : url,
contentType : "application/json; charset=utf-8",
success : function (msg) {
//code
},
async : false,
error : function (err) {
alert(err);
}
});
$("#generatingexcel").css("display", "none");
While this works well in Firefox, there seems to be an issue in IE10 where the transparent DIV and loading message do not appear. To debug this, I added an alert() message after setting the display property to block, which made the transparent DIV visible in IE10. However, once I removed the alert, the transparency effect disappeared again.
$("#generatingexcel").css("display", "block");
alert("Wait");
If you have any insights on why this behavior occurs or if something crucial is missing in the setup, please let me know.