:strip_exif()/u/47345/pronk.gif?f=community)
Ik ben bezig met het bouwen van een 'overlayer', een layer over de pagina heen i.p.v een popup.
De layer werkt perfect, ik loop alleen tegen een heel irritant probleem aan. Ik wil dat de layer weer sluit op het moment dat de gebruiker naast de inhoud klikt (id="overlay_box"). Ook dat werkt op zich al prima.
Het probleem is dat de layer ook sluit als je op de inhoud (id="overlay_test") klikt. Dit mag niet gebeuren omdat er in de inhoud ook links en dergelijke kunnen staan en gebruikers daar dus gewoon moeten kunnen klikken.
Heeft iemand een idee hoe ik er voor kan zorgen dat de layer wel sluit als ik op id="overlay_box" klik maar niet sluit als ik op id="overlay_test" klik?
Hieronder mijn voorbeeldcode:
De layer werkt perfect, ik loop alleen tegen een heel irritant probleem aan. Ik wil dat de layer weer sluit op het moment dat de gebruiker naast de inhoud klikt (id="overlay_box"). Ook dat werkt op zich al prima.
Het probleem is dat de layer ook sluit als je op de inhoud (id="overlay_test") klikt. Dit mag niet gebeuren omdat er in de inhoud ook links en dergelijke kunnen staan en gebruikers daar dus gewoon moeten kunnen klikken.
Heeft iemand een idee hoe ik er voor kan zorgen dat de layer wel sluit als ik op id="overlay_box" klik maar niet sluit als ik op id="overlay_test" klik?
Hieronder mijn voorbeeldcode:
code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
| <!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">
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body {
margin: 0 0 0 0;
}
#site {
text-align: center;
}
h2 {
display: inline;
}
#overlay_box {
display: none;
background: url('overlay_bg.gif');
position: absolute;
width: 100%;
height: 100%;
}
#overlay_box .sluiten {
display: inline;
float: right;
cursor: pointer;
background: url('overlay_close.gif') no-repeat;
height: 15px;
width: 15px;
margin: -5px -5px; 0 0;
}
#overlay_test {
display: none;
background: #ffffff;
border: 3px solid #dddddd;
width: 640px;
margin-top: 50px;
padding: 5px 5px 0px 5px;
text-align: left;
}
</style>
<script type="text/javascript">
function showOverlay(overlayBox, overlayName) {
closeOverlay();
document.getElementById(overlayBox).style.display = 'block';
document.getElementById(overlayName).style.display = 'block';
}
function closeOverlay() {
var overlaydivs = document.getElementsByTagName('div');
for (var i = 0; i < overlaydivs.length; i++) {
var overlaydiv = overlaydivs[i];
if (overlaydiv.id.indexOf('overlay_') == 0 && overlaydiv.style) {
overlaydiv.style.display = 'none';
}
}
}
</script>
</head>
<body>
<div id="overlay_box" align="center" onclick="closeOverlay();">
<div id="overlay_test">
<div class="sluiten" onclick="closeOverlay();"></div>
<h2>test</h2>
<img src="test" width="640" height="480" alt="test" title="test" />
</div>
</div>
<div id=site>
<a href="javascript:showOverlay('overlay_box', 'overlay_test');">test</a>
</div>
</body>
</html> |
Ja lekker!