Hide/Show PopUp Div

Calilo · 05-04-2009, 06:27 AM

Hey guys, im quite stucked with a small script here, Im sure someone can help me get it solved.

Im trying to make a popup div (when link is clicked) which can be closed (visibility: none) by clicking anywhere outside the div, I got that part done, but now if I add more div's inside the popup div and click over those div's the popup gets closed,

I made my script based on a couple scripts i found on google

Code:

<head>
<script type="text/javascript">

document.onclick=check;
		var hza;

	function check(e) { 
	var target = (e && e.target) || (event && event.srcElement); 
	var mainobj = document.getElementById('div1');
	var linkobj = document.getElementById('link');
		if(target!=mainobj&&target!=linkobj){ 
			if (hza && hza.style) {
				hza.style.display =  'none'; }
		} 
	}
	function toggle(layer_ref) {
			if (document.getElementById) {
				hza = document.getElementById(layer_ref);
			} else if (document.all) {
				hza = document.all['layer_ref'];
			}
			if (hza && hza.style) {
				hza.style.display = (hza.style.display == '')? 'none':'';
			}
	}
</script>

<a href="#" onclick="toggle('div1');return false;" id="link"></a>
<div id="div1" style="position: relative; margin: 0 auto; width: 800px; display: none; border: dotted;">
	<div style="width: 800px; height: 35px; background-color: #000;"></div><br /><br /><br /><br />
</div>

Any suggestion greatly appreciated.

vwphillips · 05-04-2009, 02:09 PM

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

document.onclick=check;

var Ary=[];

function check(e) {
 var target = (e && e.target) || (event && event.srcElement);
 while (target.parentNode){
  if (target.className.match('pop')||target.className.match('poplink')) return;
  target=target.parentNode;
 }
 var ary=zxcByClassName('pop')
 for (var z0=0;z0<ary.length;z0++){
  ary[z0].style.display='none';
 }
}
function zxcByClassName(nme,el,tag){
 if (typeof(el)=='string') el=document.getElementById(el);
 el=el||document;
 for (var tag=tag||'*',reg=new RegExp('\\b'+nme+'\\b'),els=el.getElementsByTagName(tag),ary=[],z0=0; z0<els.length;z0++){
  if(reg.test(els[z0].className)) ary.push(els[z0]);
 }
 return ary;
}

function toggle(layer_ref) {
 var hza = document.getElementById(layer_ref);
 if (hza && hza.style){
  if (!hza.set){ hza.set=true;  Ary.push(hza); }
  hza.style.display = (hza.style.display == '')? 'none':'';
 }
}

</script>
</head>

<body>
<a href="#"  class="poplink" onclick="toggle('div1');return false;" id="link">Link</a><br />
<a href="#"  class="poplink" onclick="toggle('tst');return false;" id="link">Link2</a>

<div id="div1" class="pop" style="position: relative; margin: 0 auto; width: 800px; display: none; border: dotted;">
	<div style="width: 800px; height: 35px; background-color: #000;"></div><br /><br /><br /><br />
<input id="tst"  class="pop" type="button" name="" value="TEST" />

</div>
</body>

</html>

Calilo · 05-04-2009, 04:52 PM

Cheers man, works perfectly, it a great solution.