Programmer Lifestyle: Html

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>

Programmer Lifestyle

Sunday, February 16, 2014

How To Create Overlay Css