Home/ Questions/Q 6020879
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T03:37:55+00:00

To be more clear When you run the code —- click ‘show’ in the

  • 0

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.

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 overflow=hidden. 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.

code:

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

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

 <a id="displayText" href="javascript:toggle('toggleText');">show</a>

 <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%;">

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

 </body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Does this work?

    <html>
    <head></head>
    <script language="javascript"> 
       function toggle(el) {
           if ( el.id && el.style.display == 'block' ) {
              el.style.display = 'none';
           } else {
              el.style.display = 'block';
           }
       }

    function cancelToggle(id,e)

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

    function stop() {
        if (event.stopPropagation) {
            event.stopPropagation();
        } else {
            window.event.cancelBubble = true;
        }
    }
    </script>
    <body>

    <a id="displayText" href="javascript:toggle(document.getElementById('toggleText'));">show</a>

    <div onClick='toggle(this)' 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%;">

       <div onClick='stop()' style="background: none repeat scroll 0 0 #80C5A9; display: block; height: 40%; position:fixed; bottom: 0;  overflow: hidden; width: 100%;">
      <h1>Welcome Naren</h1>
      <label>Its good for u.All the best</label> 
     </div>
    </div>

    </body>
</html>

    The other option is to examine event.target and see if the click came from inside the inner div.

    • 0