Attach event to overlay elements

**bala2009** · 01-02-2010, 12:43 PM

I want to attach event to overlay so tht i can close the overlay on any click in the page, but not if you click on the overlay. (dont close if youclick on the overlay)

I am usingdocument.body.attachEvent("onclick", closeoverlay), but its not working, this will close the overlay even if you click on the overlay. I want to close the overlay only if there is a click event on anywhere the page except on the overlay.

Here is the code.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>

<style type="text/css">

#newoverlay {
position: absolute;
display:none;
width: 200px;
height: 55px;
left:50px;
top: 50px;
text-align:center;
z-index:113;
border:2px solid #2D5C3D;
background-color: #8bb093;
}

#orderLimitRatesBox {
position: absolute;
display:none;
width: 700px;
height: 55px;
left:100px;
top: 100px;
text-align:center;
z-index:113;
border:2px solid #4F5873;
background-color: #8bb093;
padding-top:10px;
padding-left:1px;

}

#orderLimitRatesBox li{
float:left;
margin-left: 30px;
}

#orderLimitRatesBox li{
float:left;
padding: 10px;
}

</style>
</HEAD>

<script language="JavaScript">

function openOverlay(){

var overlayElement = document.getElementById("newoverlay");

//alert();

overlayElement.style.display="block";
overlayElement.attachEvent("onclick",closeoverlay);

//document.body.attachEvent("onclick",closeoverlay);

return false;
}

function openlink(url){

var newWin = window.open(url, 'newWin','left=20,top=20,width=800,height=500,toolbar=yes,resizable=yes');
newWin.focus();

return false;
}

function closeoverlay(){

var overlayElement = document.getElementById("newoverlay");
if(overlayElement != null)
overlayElement.style.display="none";

return false;

}

</script>

<BODY >
<div id="mainsection">
<TABLE>
<TR>
<TD><a onclick="openOverlay();"> Test overlay</a></TD>
<TD></TD>
</TR>

</TABLE>

<div id="newoverlay">
<ul>
<li><a href="#" onclick="openlink('http://google.com');"> Google Link</a></li>

<li><a href="#" onclick="openlink('http://yahoo.com');"> Yahoo Link</a></li>

</ul>
</div>

</div>
</BODY>
</HTML>

Thanks of your help.

**mitya** · 01-02-2010, 01:17 PM

The key is to query the trigger element that caused the event. You should also know that attachEvent() and detachEvent() are IE-only.

Code:

<script type="text/javascript">

function closeoverlay(e) {
	var trigger = e.target ? e.target : e.srcElement; //only run if trigger is not overlay
	if (trigger.id != 'overlay') document.getElementById('overlay').style.display = 'none';
}

if (window.addEventListener)
document.addEventListener('click', closeoverlay, false);
else if (window.attachEvent)
document.attachEvent('onclick', closeoverlay);

</script>

<body>
<div style="width: 300px; height: 200px; position: absolute; left: 300px; height: 200px; background: #f90;" id="overlay">
I am the overlay element
</div>
</body>

**Kor** · 01-04-2010, 04:54 AM

What about a simpler one?:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript">
function closeoverlay(e){
var target=e?e.target:event.srcElement; // Moz&W3C : IE
var mydiv=document.getElementById('overlay');
target!=mydiv?mydiv.style.display='none':null;
}
document.onclick=closeoverlay;
</script>
</head>
<body>
<div style="width: 300px; height: 200px; position: absolute; left: 300px; height: 200px; background: #f90;" id="overlay">
I am the overlay element
</div>
</body>
</html>

**bala2009** · 01-04-2010, 11:31 AM

basically i have to show overlay when user click on a link (say showOverlay) and i want to attach the event only
when this overlay is shown. so i attached event in the showoverlay function.

document.attachEvent('onclick' closeoverlay); //lets assume for IE case

when i click on showOverlay link, the overlay appears and disappears immidiately.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<style type="text/css">

#overlay {
position: absolute;
display:none;

}

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

function showOverlay(){
//alert("inside");
document.getElementById('overlay').style.display="block";
//document.onclick=closeoverlay;
document.attachEvent('onclick', closeoverlay);
}

function closeoverlay(e){
var target=e?e.target:event.srcElement; // Moz&W3C : IE
var mydiv=document.getElementById('overlay');
target!=mydiv?mydiv.style.display='none':null;
}

</script>
</head>
<body>

<a href="#" onclick="showOverlay();">Show Overlay </a>

<div style="width: 300px; height: 200px; position: absolute; left: 300px; height: 200px; background: #f90;" id="overlay">
I am the overlay element
</div>
</body>
</html>

**bala2009** · 01-04-2010, 01:45 PM

Hi Kor,

Any idea how to fix this issue.

Thanks

**bala2009** · 01-04-2010, 09:04 PM

Hi,

Can anyone help me with the above issue.

Thanks.

**Fang** · 01-05-2010, 02:26 AM

Code:

function showOverlay(){
var overlay = document.getElementById('overlay');
overlay.style.display=(overlay.style.display=="none")? "" : "none";
}

Code:

<a href="#" onclick="showOverlay();return false;">Show Overlay </a>
<div style="display:none; width: 300px; height: 200px; position: absolute; left: 300px; background: #f90;" id="overlay">
I am the overlay element
</div>

**bala2009** · 01-05-2010, 08:25 AM

Hi Fang,

This just displays the overlay and when clicks on the link again it disappears, i want to close the overlay when user clicks anywhere on the page except on the actual overlay.

**Kor** · 01-05-2010, 08:44 AM

Like this?:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript">
function closeoverlay(e){
var target=e?e.target:event.srcElement; // Moz&W3C : IE
var mydiv=document.getElementById('overlay');
var mylink=document.getElementById('show');
target!=mydiv&&target!=mylink?mydiv.style.display='none':null;
}
function showoverlay(){
document.getElementById('overlay').style.display='block';
}
document.onclick=closeoverlay;
</script>
</head>
<body>
<div style="width: 300px; height: 200px; position: absolute; left: 300px; height: 200px; background: #f90;" id="overlay">
I am the overlay element
</div>
<br>
<br>
<a id="show" href="#" onclick="showoverlay();return false">Show div</a>
</body>
</html>

**bala2009** · 01-05-2010, 12:14 PM

Hi Kor,

Thanks, it works i tried event adding document.onclick=closeoverlay; inside the showOverlay() method, so that the event is attached only when the overlay is opened.

Thanks to everyone.

Thread: Attach event to overlay elements

Thread Tools

Display

Attach event to overlay elements

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions