How can i create a overlay using jquery code?
Snippet Code
This code is used to create overlay in jquery using showoverlay() function. For example, "loading" is given inside the function showoverlay().
<script type='text/javascript'>
$(function () {
$("body").click(function () {
if ($("#overlay").length > 0) {
removeoverlay();
} else {
showoverlay("Loading...");
}
});
showoverlay("Loading...");
});
function showoverlay(text) {
$("<div id='overlay' class='overlay'>" + text + "</div>").appendTo("body");
}
function removeoverlay() {
$("#overlay").remove();
}
</script>
<style>
body{
position: absolute;
width: 100%;
height: 100%;
}
.overlay
{
position: fixed;top:0px;
left:0px;width:100%;
height:100%;
background-color: grey;
z-index: 10000;
vertical-align:middle;
text-align: center;
color: white;font-size: 20px;
font-weight: bold;cursor: wait;
}
</style>
Tags