Javascript A simple grayed out overlay

Overlay
One of the most adopted feature of web2.0 is the use of a grayed out overlay panel. Overlay is useful to insert a new page inside the current page..

Almost all the javascript libraries available today comes with the overlay feature inbuilt.

Below is the code snippet for overlay using plain js and html without any libraries.

Code

<HTML>
    <BODY>
The javascript code to display and hide the overlay.
    <script type="text/javascript">
    function disable1() {
    var blurDiv = document.createElement("div");
    blurDiv.id = "blurDiv";
    blurDiv.style.cssText = "position:absolute; top:0; right:0; width:" + screen.width +
    "px; height:" + screen.height +
    "px;background-color: #000000; opacity:0.5; filter:alpha(opacity=50)";
    var aDiv = document.createElement("div");
    aDiv.appendChild(document.createTextNode("Overlay panel"));
    aDiv.id = "aDiv";
    var b1 = document.createElement("<br>");
    var b2 = document.createElement("<br>");
    aDiv.appendChild(b1);
    aDiv.appendChild(b2);
    aDiv.style.cssText = "position:absolute; top:200; right:200; width:" + screen.width / 4 +
    "px; height:" + screen.height / 4 + "px;background-color: #FFFFFF;";
    var bt = document.createElement("input");
    bt.type = "button";
    bt.id = "bt";
    bt.value = "Hide";
    bt.onclick = clear;
    aDiv.appendChild(bt);
    blurDiv.appendChild(aDiv);
    document.getElementsByTagName("body")[0].appendChild(blurDiv);
    }
    function clear() {
    var blurDiv = document.getElementById("blurDiv");
    blurDiv.parentNode.removeChild(blurDiv);
    }
    </script>
    
Here goes the remaining html
    <div class="buttonAlign">
    <table border="0" cellspacing="1" cellpadding="0" align="center" class="sjTable"width="100%">
    <tr>
    <th colspan="2">
    Overlay panel
    </th>
    </tr>
    <tr>
    <td align="left">
    Click on the Show Panel button to open up the overlay panel on this page.
    </td>
    <td align="right">
    <input type="button" name="shoPanel" value="Show Panel" onclick="disable1()"/>
    </td>
    </tr>
    </table>
    </div>
    <div id="myFreezeDiv">
    hi how are you
    </div>
    </BODY>
    </HTML>

Comments

Post a Comment

Popular posts from this blog

SVN File Creation Date

Java NIO2 - Watching a directory for changes. FileWatcherService.

Ubuntu / kubuntu - Laptop key board cursor jumping issue