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

bibeu · 04/03/2011, 12h36

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

NoSmoking · 05/03/2011, 16h41

mets des return false en fin de tes fonctions

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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';
  return false;
}
function closebox(){
  document.getElementById('box').style.display='none';
  document.getElementById('filter').style.display='none';
  return false
}

et sur l'appel à ces fonctions tu fais

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<a href="#" onclick="return closebox()">fermer</a>
<a href="#" onclick="return openbox();">lien1</a>

cela annulera l'action par défaut et donc tu n'augmenteras pas l'historique

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email