Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Regular Coder
    Join Date
    Jun 2002
    Location
    Mex
    Posts
    122
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Hide/Show PopUp Div

    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.

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,534
    Thanks
    3
    Thanked 513 Times in 500 Posts
    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>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #3
    Regular Coder
    Join Date
    Jun 2002
    Location
    Mex
    Posts
    122
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Cheers man, works perfectly, it a great solution.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •