Sunday, October 18, 2009

Hide Panel When Clicking Anywhere in the Page

This example shows how to hide a Div when clicking anywhere the page:

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">
    <title>Untitled Page</title>
     <script type=”text/javascript”>
        function HideDiv(){
             document.getElementById("ContainerDiv").style.display = 'none';
             return false;
        }

        function ShowDiv(e){
            document.getElementById("ContainerDiv").style.display = 'block';
            if(!e){
            e=window.event;
            }
            e.cancelBubble=true;
            return false;
            
        }
   </script> 
</head>

<body onclick="return HideDiv();">
    <form id="form1" runat="server">

    <asp:Button ID="Button1" runat="server" 
                Text="Show Div" OnClientClick="return ShowDiv(event);" />

      <div id="ContainerDiv"
             style="width:521px;
             height:200px;
             background-color:Gray;
             left:150px;
             position:absolute;
             top: 201px;
             display:block"
             align="center"
             onclick ="return ShowDiv(event);">

       HELLO ASP.NET
       <br />
       <asp:TextBox ID="TextBox1" runat="server" 
            onclick = "return ShowDiv(event);"></asp:TextBox>
      </div>
    </form>
</body>

</html>