Javascript If click outside layer

Hi Experts

I have a div layer that appears onclick.

My question is that to hide the layer I have a X with a onclick style.display='none'

How can i make it so that if I click anywhere on the screen that is not in the layer, the layer hides?

Cheers
LVL 1
nikdonovanauAsked:
Who is Participating?
 
Michel PlungjanConnect With a Mentor IT ExpertCommented:
So with a few changes to the code  from the link

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<style type="text/css">
#mydiv{
    background-color: #999999;
    height: 100px;
    width: 100px;
    display:none;
    border:1px solid black
}
</style>
<script type="text/javascript">
document.onclick=check;
function check(e){
  var target = (e && e.target) || (event && event.srcElement);
  var obj = document.getElementById('mydiv');
  var obj2 = document.getElementById('sho');
  var parent = checkParent(target);
  if(parent){obj.style.display='none'}
  if(target==obj2){obj.style.display='block'}
}
function checkParent(t){
  while(t.parentNode){
    if(t==document.getElementById('mydiv')){
      return false
    }
    t=t.parentNode
  }
  return true
}
</script>
</head>
<body>
<a href="#" id="sho">show the div</a>
<div id="mydiv">
<div style="float:right"><a href="#" onClick="document.getElementById('mydiv').style.display='none';return false">[X]</div>
</div>
</body>
</html>
0
 
Michel PlungjanIT ExpertCommented:
0
 
nikdonovanauAuthor Commented:
Thanks for that :)
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.