www.webdeveloper.com
Results 1 to 5 of 5

Thread: Create Custom Popup Div That Closes When Clicked Outside of the DIV

  1. #1
    Join Date
    Aug 2010
    Posts
    33

    Create Custom Popup Div That Closes When Clicked Outside of the DIV

    I'd like to create an div that is displayed when an HTML element is click. That portion of it isn't a problem as it's a simple onclick="displaydiv();". What I need is the ability to automatically hide the div when the user clicks outside of the bounds of the div. I'm trying to reproduce the basical functionality of the AJAX PopupWindowExtender available for ASP.NET.

    So, how would I detect when the user has clicked outside of a div?

  2. #2
    Join Date
    Aug 2010
    Posts
    33

  3. #3
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,682
    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>
    <style type="text/css">
    /*<![CDATA[*/
    #signup {
      position:fixed;z-Index:101;left:-3000px;width:300px;height:200px;background-Color:red;
    }
    
    #message {
      position:fixed;z-Index:101;left:-3000px;width:200px;height:200px;background-Color:green;
    }
    
    /*]]>*/
    </style></head>
    
    <body>
    
    <a href="#" onclick="return zxcModual.open('signup');" >Link</a>
    <a href="#" onclick="return zxcModual.open('message');" >Link</a>
    <div id="signup" >
    </div>
    <div id="message" >
    </div>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    
    var zxcModual={
    
     init:function(ms){
      this.ms=typeof(ms)=='number'&&ms>10?ms:10
      this.addevt(document,'click','close');
     },
    
     close:function(e){
      var eobj=e.target?e.target:e.srcElement,obj=this.lst;
      if (obj&&obj.offsetLeft>0){
       while (eobj.parentNode){
        if (eobj==obj){
         return false;
        }
        eobj=eobj.parentNode;
       }
       this.animate(obj,obj.offsetTop,-obj.offsetHeight-10,new Date(),this.ms/4);
      }
     },
    
     open:function(id){
      var o=this,obj=document.getElementById(id),wwhs=this.wwhs();
      if (obj&&obj.offsetLeft<0){
       o.animate(obj,-obj.offsetHeight-10,(wwhs[1]-obj.offsetHeight)/2,new Date(),o.ms,(wwhs[2]+(wwhs[0]-obj.offsetWidth)/2));
      }
      return false;
     },
    
     animate:function(obj,f,t,srt,mS,lft){
      var oop=this,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
      if (isFinite(now)){
       obj.style.top=now+'px';
      }
      if (lft){
       obj.style.left=lft+'px';
      }
      if (ms<mS){
       this[obj.id]=setTimeout(function(){ oop.animate(obj,f,t,srt,mS,lft); },10);
      }
      else {
       obj.style.top=t+'px';
       if (t>0){
        this.lst=obj;
       }
       else {
        obj.style.left='-3000px';
       }
      }
     },
    
     addevt:function(o,t,f,p){
      var oop=this;
      if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](e,p);}, false);
      else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](e,p); });
     },
    
     wwhs:function(){
      if (window.innerHeight) return [window.innerWidth-10,window.innerHeight-10,window.pageXOffset,window.pageYOffset];
      else if (document.documentElement.clientHeight) return [document.documentElement.clientWidth-10,document.documentElement.clientHeight-10,document.documentElement.scrollLeft,document.documentElement.scrollTop];
      return [document.body.clientWidth,document.body.clientHeight,document.body.scrollLeft,document.body.scrollTop];
     }
    
    
    }
    
    zxcModual.init(1000);
    /*]]>*/
    </script>
    </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/

  4. #4
    Join Date
    Aug 2010
    Posts
    33
    Quote Originally Posted by dch31969 View Post
    Too simple to be true. I need to mod the code so that the codes doesn't run when the image which displays the div is clicked. The onclick of the image sets the hidden input 'TargetPopup' to the id of the DIV to be hidden. This allows the code to work for any popup regardless of name.

    Code:
            $(document).click(function (e) {
                var target = $get("TargetPopup").value;
                if (!$(e.target).closest(target).length) {
                    $get(target).style.display = 'none';
                }
            });*/

  5. #5
    Join Date
    Aug 2010
    Posts
    33
    Quote Originally Posted by vwphillips View Post
    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>
    <style type="text/css">
    /*<![CDATA[*/
    #signup {
      position:fixed;z-Index:101;left:-3000px;width:300px;height:200px;background-Color:red;
    }
    
    #message {
      position:fixed;z-Index:101;left:-3000px;width:200px;height:200px;background-Color:green;
    }
    
    /*]]>*/
    </style></head>
    
    <body>
    
    <a href="#" onclick="return zxcModual.open('signup');" >Link</a>
    <a href="#" onclick="return zxcModual.open('message');" >Link</a>
    <div id="signup" >
    </div>
    <div id="message" >
    </div>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    
    var zxcModual={
    
     init:function(ms){
      this.ms=typeof(ms)=='number'&&ms>10?ms:10
      this.addevt(document,'click','close');
     },
    
     close:function(e){
      var eobj=e.target?e.target:e.srcElement,obj=this.lst;
      if (obj&&obj.offsetLeft>0){
       while (eobj.parentNode){
        if (eobj==obj){
         return false;
        }
        eobj=eobj.parentNode;
       }
       this.animate(obj,obj.offsetTop,-obj.offsetHeight-10,new Date(),this.ms/4);
      }
     },
    
     open:function(id){
      var o=this,obj=document.getElementById(id),wwhs=this.wwhs();
      if (obj&&obj.offsetLeft<0){
       o.animate(obj,-obj.offsetHeight-10,(wwhs[1]-obj.offsetHeight)/2,new Date(),o.ms,(wwhs[2]+(wwhs[0]-obj.offsetWidth)/2));
      }
      return false;
     },
    
     animate:function(obj,f,t,srt,mS,lft){
      var oop=this,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
      if (isFinite(now)){
       obj.style.top=now+'px';
      }
      if (lft){
       obj.style.left=lft+'px';
      }
      if (ms<mS){
       this[obj.id]=setTimeout(function(){ oop.animate(obj,f,t,srt,mS,lft); },10);
      }
      else {
       obj.style.top=t+'px';
       if (t>0){
        this.lst=obj;
       }
       else {
        obj.style.left='-3000px';
       }
      }
     },
    
     addevt:function(o,t,f,p){
      var oop=this;
      if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](e,p);}, false);
      else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](e,p); });
     },
    
     wwhs:function(){
      if (window.innerHeight) return [window.innerWidth-10,window.innerHeight-10,window.pageXOffset,window.pageYOffset];
      else if (document.documentElement.clientHeight) return [document.documentElement.clientWidth-10,document.documentElement.clientHeight-10,document.documentElement.scrollLeft,document.documentElement.scrollTop];
      return [document.body.clientWidth,document.body.clientHeight,document.body.scrollLeft,document.body.scrollTop];
     }
    
    
    }
    
    zxcModual.init(1000);
    /*]]>*/
    </script>
    </body>
    
    </html>
    Thank you for posting that, but I need a detailed explaination of whats going on in order to adapt it to my use. Its beyond my knowledge of JavaScript and I don't have time to dig into what's going on as I'm working up against a deadline.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles