"Light box maison" et bouton précédent navigateur

Bonjour à tous,

En général je trouve les solutions à mes problèmes en parcourant le forum mais là je bloque ou je formule mal ma demande...bref ce qui m'amène vers vous c'est le problème suivant :

-J'utilise une light box dans mon site pour afficher données dynamiques (php+mysql).
J'ai plusieurs liens qui peuvent ouvrir cette light box et ça crée du coup un historique dans le navigateur (jusque là logique), mais si la light box est ouverte et que j'utilise le bouton précédent du navigateur, alors les pages changent en arrière plan de la box, mais elle reste ouverte.

C'est finalement assez logique comme comportement mais je souhaite que la light box se ferme si on utilise le bouton précédent du navigateur.

D'avance merci de m'aider

Ci-dessous un code simplifié de ma page pour tester ce comportement.

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
87
88
89
90
91
92
93
94
95
96
97
98
99
<!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 light box</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
 
#filter
{
        position: fixed;
        display: none;
        top: 0%;
        left: 0%;
        width: 100%;
        height: 100%;
        background-color: black;
        z-index:10;
        opacity:0.7;
        filter: alpha(opacity=70);
}
 
#box 
{
        position:fixed;
        display: none;
        top: 50%;
        left: 50%;
        width: 800px;
        height: 580px;
        margin-top: -290px;
        margin-left: -400px;
        z-index:11;
}
#contenu
{
        position:absolute;
        overflow: auto;
        width: 780px;
        height: 530px;
        top: 50%;
        left: 50%;
        margin-top: -265px;
        margin-left: -390px;
        background-color: white;
        text-align:center;
}
</style>
 
<script type="text/javascript">
function viewHeight() 
{
    if(window.innerHeight)return(window.innerHeight);
    if(document.documentElement && document.documentElement.clientHeight) 
         return(document.documentElement.clientHeight);
    if(document.body) return(document.body.clientHeight); 
    return 50;
}
 
// OUVRIR LA LIGHT BOX
function openbox()
{       
  var box = document.getElementById('box');
  var filter = document.getElementById('filter'); 
  
  box.style.display='block';
  filter.style.display='block';
  
    var top =  (viewHeight() - box.offsetHeight ) / 2;    
    box.style.position='fixed';
    filter.style.position='fixed';      
}       
 
// FERMER LA LIGHTBOX
function closebox()
{
   document.getElementById('box').style.display='none';
   document.getElementById('filter').style.display='none';
}
 
</script>
</head>
 
<body>
<div id="filter"></div>
 
<div id="box">
			<div id="contenu">
            <a href="#" onclick="closebox()">fermer</a><br /><br />
            TEXTE DE CONTENU DYNAMIQUE + PHOTOS
            </div>
</div>
<a href="test.html#1" onclick="openbox();">lien1</a><br />
<a href="test.html#2" onclick="openbox();">lien2</a><br />
<a href="test.html#3" onclick="openbox();">lien3</a><br />
<a href="test.html#4" onclick="openbox();">lien4</a><br />
<a href="test.html#5" onclick="openbox();">lien5</a><br />
<a href="test.html#6" onclick="openbox();">lien6</a><br />
</body>
</html>