Need to close a div when it is click on it but should not close when inner div is clicked
<p>To be more clear When you run the code ----  click 'show' in the page  a div opens up with a gray background and another inner div with green background---onclick on gray background the div needs to close if we click on green div it should not close please help me out Thanks In advance.</p>

<p>I have a text 'show' onclick on show it open's up a div which is set to display=none and this div is set to <code>overflow=hidden</code>. Inside the div I have a another div with matter. This works fine but the issue is onclick of the main div which is set to display=none has to close when it is click in its area.</p>

<p>code:</p>

<pre><code>&lt;html&gt;
&lt;head&gt;&lt;/head&gt;
&lt;script language="javascript"&gt; 
function toggle(tId) {
 var ele = document.getElementById(tId);
       ele.style.display = "block";
}
function cancelToggle(id,e)

      {         var target = (e &amp;&amp; e.target) || (event &amp;&amp; event.srcElement);
        var obj = document.getElementById('toggleText');
        if(target!=obj){obj.style.display='none'}
      }
&lt;/script&gt;
&lt;body&gt;

 &lt;a id="displayText" href="javascript:toggle('toggleText');"&gt;show&lt;/a&gt;

 &lt;div id="toggleText" style="display: none; background: none repeat scroll 0 0 rgba(0, 0, 0, 0.6);  
            bottom: 0; height: 100%; left: 0; overflow: hidden; position: fixed; right:100; top: 10; width: 100%;"&gt;

    &lt;div style="background: none repeat scroll 0 0 #80C5A9; display: block; height: 40%;
                position:fixed; bottom: 0;  overflow: hidden; width: 100%;"&gt;
   &lt;h1&gt;Welcome Naren&lt;/h1&gt;
   &lt;label&gt;Its good for u.All the best&lt;/label&gt; 
  &lt;/div&gt;
 &lt;/div&gt;

 &lt;/body&gt;
&lt;/html&gt;
</code></pre>
