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?
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';
}
});*/
<!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.
Reply With Quote
Originally Posted by dch31969
Bookmarks