Discussion :

[yann123456]

Bonjour,

Tout d'abord j'espère poster au bon endroit, je pense que mon problème doit se résoudre au niveau du CSS, mais pas sur de mon coup.

Sur un site, j'affiche une popup en cliquant sur des images.
C'est une popup html qui s'affiche grâce a javascript en passant le style de la popup de "visible " a "hiden".
ça se passe bien mais lorsque je suis en bas de page je ne vois plus la popup s'afficher.
J'aimerais que ma popup s'affiche au centre de l'écran quelques soit la position dans la page.

Vous comprendrez mieux le problème en regardant cette page: http://ylegris.free.fr/pb-popup/cas1.php
Si vous cliquez sur les premières images la fenêtre apparait nickel, mais plus on descend dans la page et plus la popup se retrouve hors du champ de vision.

Comment puis-je faire ?

Merci d'avance.

[Macmillenium]

Bonjour,

Il suffit de détecter la position du scroll en JS et affecter la valeur à la propriété top, il faudrait donc virer le top:50% et le margin-top:-210px, tu peux centrer ton bloc verticalement en JS :

Code javascript :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
function Afficher_fiche(anId) {
	var PositionScroll = document.documentElement.scrollTop || window.pageYOffset;
 
	var HauteurBloc = document.getElementById(anId).offsetHeight;
	var HauteurViewport = document.documentElement.clientHeight || window.innerHeight;
 
	var a = Math.ceil((HauteurViewport - HauteurBloc) / 2);
	b = a + PositionScroll;
		if	(b < 0) { b = 0; }	
 
	document.getElementById(anId).style.top = b + 'px';
	document.getElementById(anId).style.visibility = 'visible';
}

[yann123456]

Nickel, merci beaucoup

[yann123456]

Bonjour,

Je viens de me rendre compte qu'Internet explorer n'aime pas.

Ça marche bien sous firefox, safari et chrome, mais sous ie (sacré ie), la fenêtre ne s'affiche pas qu'en je clique sur les premières images, mais ça marche a partir de la 5 ou 6éme.

Voyez par vous même http://ylegris.free.fr/pb-popup/cas2.php

Aurait-il un problème avec la position du scroll ?

[vodiem]

salut Macmillenium, yann123456

autrement:

Code CSS :

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
#fiche0.fiche {
	position:fixed;
	width:500px;
	height:200px;
	left:50%;
	top:50%;
	margin-top: -100px;
	margin-left: -250px;	
	visibility: hidden;
	font-family:arial, verdana, sans-serif;
	text-align:justify;
	font-size:12px;
	background: white;
	padding: 5px;
	border: 1px solid #62c0f4;	
	color:#396a86;
}

[Macmillenium]

Ah dsl il faut mettre window.pageYOffse avant.

Code javascript :

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

1
2
 
var PositionScroll = window.pageYOffset || document.documentElement.scrollTop;

[yann123456]

Merci vodiem pour ton aide.

Mais dans ce cas (et si j'ai bien compris) je vais devoir faire un code css pour chaque fiche. non ?

Dans mon exemple il n'y a qu'une seule fiche qui est appelé pour toutes les images, mais en réalité, il y a une fiche pour chaque image (fiche0, fiche1, fiche2...)

[vodiem]

non tu crées uniquement une classe.

je n'ai pas tout regardé dans ton code c'est pour cela que j'ai précisé #fiche0.fiche pour ne pas remplacer .fiche qui aurait pu être utilisé par d'autre élément.