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

  1. AnonymousJune 28, 2011 at 11:38 PM

    This is working. Good one!

    ReplyDelete
  2. AnonymousMarch 17, 2026 at 11:45 AM


    In today's digital age, having a reliable online presence is essential for any business. Many companies turn to various platforms to enhance their visibility and reach their target audience effectively. For those interested in exploring new opportunities, zizodtf.com offers a range of services tailored to meet diverse needs. By leveraging their expertise, businesses can improve their online strategies and achieve greater success.

    ReplyDelete
  3. AnonymousJune 14, 2026 at 7:16 AM


    Gemäß § 64 des neuen DORA-Regulativs müssen Unternehmen ihre Drittanbieter sorgfältig überwachen. Dieser Paragraph hebt hervor, wie wichtig es ist, die Resilienz gegenüber potenziellen Risiken zu gewährleisten. Oft wird angenommen, dass ein einfacher Vertrag mit einem Dienstleister ausreicht. Doch das Gegenteil ist der Fall: Regelmäßige Resilienztests sind unerlässlich, um Schwachstellen zu identifizieren und zu beheben. Zudem sollte man sich auf Anbieter konzentrieren, die hohe Standards in der Cybersecurity bieten, zum Beispiel nach ISO 27001 zertifiziert sind. Eine Weiterbildung in cybersecurity kann hier wertvolle Kenntnisse vermitteln; entsprechende Angebote finden Sie unter https://csvisor.de/. Nur so können Unternehmen wirklich sicherstellen, dass sie gut aufgestellt sind und nicht von unvorhergesehenen Problemen überrascht werden.

    ReplyDelete

Post a Comment

Popular posts from this blog

Log4j multiple WAR files in single EAR configuration

-
Log4j multiple WAR files in single EAR configuration Problem: When you have multiple WAR files under the same EAR with multiple log4j config files in each of the war files, the logging API will pickup the first available config file and ignores the list. i.e, only a single log4j config file applies to entire EAR. Consider the below app app.ear |__admin.war    |__WEB-INF/classes/log4.xml |__web.war    |__WEB-INF/classes/log4j.xml When you deploy this app to the server all logs of two war files admin.war and web.war will go to admin.war' log. The log4j.xml in web.war has no effect here. There are some complex solutions for this like adding a logback, specifying package level log files in log4j configuration etc. Solution The easiest way is configuring the context param in web.xml In your web.xml add the following context param will send the log4j config locations specific to the contexts and fixes this issue. web.war/WEB-INF/classes/log4j...
More posts »

Java NIO2 - Watching a directory for changes. FileWatcherService.

-
Image
File Watch Service The NIO2 WatchService API provides the ability for java code to watch for file modifications in a directory in the filesystem. A WatchService object watches the folder it is registered with and signals the changes detected through event notifications.  Steps to create a WatchService Create a WatchService object (FileSystem.newWatchService()) Register the directories to be watched with the WatchService (WatchService.register()) Watch for file change events (poll()/take() methods) Retrieve the event keys and process them Rest the key and got to step 3 to watch again. Example code Below is a simple working code. import java.io.IOException; import java.nio.file.Path; import java.nio.file.Paths; import java.nio.file.StandardWatchEventKinds; import java.nio.file.WatchEvent; import java.nio.file.WatchKey; import java.nio.file.WatchService; import java.util.List; import java.util.concurrent.TimeUnit; public class FileWatcherTest { private sta...
More posts »

Ubuntu / kubuntu - Laptop key board cursor jumping issue

-
Image
Ubuntu cursor jumping problem Issue : When you type in Ubuntu/Kubuntu you may get annoyed by cursor jumping here and there in the screen. This happens across all the applications. You might have tried adjusting key board settings, key stroke speed etc. But this is not related to your key board, but the touch pad! Cause: The cause of this issue is your touch pad. Yes, while typing parts of your hand/fingers often touch the keyboard. In windows this touch will not be deducted while typing. But for Ubuntu it is.  So when you type something and un-intentionally unknowingly touch your touch pad will take your cursor to the appropriate mouse position with respect to your touch forgetting you are typing something!!! Solution: Simple. Say your touch pad not to care the touches while I am eagerly typing something important.. How to say that? Open Synaptix Touch pad manager  Check Automatically switch of touch pad on keyboard activity Time to wait before switc...
More posts »