Closing Div Layer on body click

**spiderphp** · 11-16-2011, 01:12 PM

I had implement a div layer that will close onClick on a image

Code:

function myDiv()
	{
		
		 if(document.getElementById(myDiv').style.display == 'none' )
	  {
		
	 	 document.getElementById('myDiv').style.display = 'block'; 
	  }
	  else
	  {		 
		 document.getElementById('myDiv').style.display = 'none' ;
	  }
	}

This is working fine, actually i want to display div layer as it is but need to close that div layer when i click any where else in the body. How can i implement this thing?

**vwphillips** · 11-16-2011, 03:30 PM

but need to close that div layer when i click any where else in the body

I presume you mean any element other than the DIV.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

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

<head>
  <title></title>
<script  type="text/javascript">
/*<![CDATA[*/

function myDiv(){
 var obj=document.getElementById('myDiv'),e=window.event||arguments.callee.caller.arguments[0],eobj=e.target?e.target:e.srcElement;
 while (eobj.parentNode){
  if (eobj==obj){
   return false;
  }
  eobj=eobj.parentNode;
 }
 obj.style.display=obj.style.display == 'none'?'block':'none'
}

function Init(){
 document.body.onclick=function(){ myDiv(); }
}

if (window.addEventListener){
 window.addEventListener('load',Init, false);
}
else if (window.attachEvent){
 window.attachEvent('onload',Init);
}


/*]]>*/
</script>
</head>

<body bgcolor="green">
<div id="myDiv" style="width:200px;height:200px;background-Color:red;" ></div>
<div  style="width:200px;height:200px;background-Color:blue;" ></div>

</body>

</html>

Thread: Closing Div Layer on body click

Thread Tools

Search Thread

Closing Div Layer on body click

Bookmarks

Bookmarks

Posting Permissions