The usage of overlay css is to block the user interaction. It can be done by used 1 <div> element and Css styling.
Below is the source code to create overlay.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Overlay</title>
<style>
#ImOverlay{
position:absolute;
width: 100%;
height:100%;
background-color:rgba(0,0,0,0.8);
display:none;
}
</style>
</head>
<body>
<div id="ImOverlay"></div>
<p>How overlay works ?</p>
<button id="btnOverlay" type="button" onclick="ShowOverlay();">Show Overlay</button>
</body>
</html>
<script type="text/javascript">
function ShowOverlay() {
document.getElementById("ImOverlay").style.display = "block";
}
</script>
No comments:
Post a Comment