centrer une div popup onclick

Sujet résolu

6 août 2009 à 16:36:12

Bonjour, je me retrouve confronté à un problème de centrage.

Vous l'aurez compris je ne suis pas l'auteur du code qui va suivre, je l'ai honteusement pompé sur un autre site.

Mon but est d'arriver à ce que l'image en popup soit centrer par rapport au bord du navigateur dans sa taille actuelle.
Mais je n'ai aucune idée de la fonction js à utiliser.

<style type="text/css">

#showimage{
z-index: 2;
position:absolute;
visibility:hidden;
top:0;
margin-left:100;
margin-top:0;
border: 1px solid gray;
}

#dragbar{
cursor: hand;
cursor: pointer;
background-color: #f2f2f2;
min-width: 100px; /*NS6 style to overcome bug*/
}

#dragbar #closetext{
font-weight: bold;
margin-right: 1px;
height : 18px;
color:#1B7FBB;
}
.photo2-sej{width: 165px;height : 120px;}
.lien { color:#1B7FBB; font-family:Arial; font-size:12px; font-weight: bold; text-decoration:none;}
.lien:hover { color:#c2c2c2; font-family:arial; font-size:12px; font-weight: bold; text-decoration:underline;}
.visiter { color:#777777; font-family:Arial; font-size:12px; font-weight: bold; text-decoration:underline;}


</style>
<SCRIPT type="text/javascript" title="Promovacances.com">

var ie=document.all
var ns6=document.getElementById&&!document.all

function ietruebody(){
return (document.compatMode!="BackCompat")? document.documentElement : document.body
}

function zoom2(which, e, position, imgwidth, imgheight){
if (ie||ns6){
crossobj=document.getElementById? document.getElementById("showimage") : document.all.showimage
// ICI POUR REGLER LA POSITION DE LA LOUPE PAR RAPPORT A LA PAGE
crossobj.style.left=280+"px"
crossobj.style.top=80+"px"

crossobj.innerHTML='<div align="right" id="dragbar" class="txt-bold"><span id="closetext" onClick="closepreview()">&raquo; Fermer</span></div><img src="'+which+'">'
crossobj.style.visibility="visible"
return false
}
else //if NOT IE 4+ or NS 6+, affiche image ds le navigateur en pleine page
return true
}

function closepreview(){
crossobj.style.visibility="hidden"
}

function drag_drop(e){
if (ie&&dragapproved){
crossobj.style.left=tempx+event.clientX-offsetx+"px"
crossobj.style.top=tempy+event.clientY-offsety+"px"
}
else if (ns6&&dragapproved){
crossobj.style.left=tempx+e.clientX-offsetx+"px"
crossobj.style.top=tempy+e.clientY-offsety+"px"
}
return false
}

function initializedrag(e){
if (ie&&event.srcElement.id=="dragbar"||ns6&&e.target.id=="dragbar"){
offsetx=ie? event.clientX : e.clientX
offsety=ie? event.clientY : e.clientY

tempx=parseInt(crossobj.style.left)
tempy=parseInt(crossobj.style.top)

dragapproved=true
document.onmousemove=drag_drop
}
}

document.onmousedown=initializedrag
document.onmouseup=new Function("dragapproved=false")


</SCRIPT>



<div id="showimage"></div>
<SCRIPT type="text/javascript">
// position loupes
var navig= navigator.appCodeName;
//alert(navig);
if (document.all){
document.write('<style type="text/css">#showloupe1{margin-left:8;margin-top:114;position:absolute;visibility:visible;)</style>');
}
if (!document.all){
document.write('<style type="text/css">#showloupe1{margin-left:8;margin-top:41;position:absolute;visibility:visible;)</style>');
}
if (ns6){
document.write('<style type="text/css">#showloupe1{margin-left:8;margin-top:114;position:absolute;visibility:visible;)</style>');
}

</SCRIPT>

<h4 name="apache">Installation de Apache</h4>

<ol>
	<li><h5>Téléchargement et installation</h5>
		
		<p>Téléchargez la dernière version de l'installateur <a href="http://www.apache.org/dist/httpd/binaries/win32/">http://www.apache.org/dist/httpd/binaries/win32/</a>.
		<br/>La version que j'utilise est celle-ci: apache_2.2.11-win32-x86-openssl-0.9.8i.msi 
		<br/>Lancez l'installation et acceptez la license.</p>
<table>
	<tr>
		<td>
			<div id="showloupe1"><a href="images/serv_web_1.gif" onClick="return zoom2('images/serv_web_1.gif',event)"></a></div>
			<a href="images/serv_web_1.gif" onClick="return zoom2('images/serv_web_1.gif',event)"><IMG alt="Cliquez pour Zoomer" SRC="images/serv_web_1.gif" name="img1" vspace="10" hspace="8" class="photo2-sej" border="0" ALIGN="top"></a>
		</td>	
		<td>
			<div id="showloupe3"><a href="images/serv_web_2.gif" onClick="return zoom2('images/serv_web_2.gif',event)"></a></div>
			<a href="images/serv_web_2.gif" onClick="return zoom2('images/serv_web_2.gif',event)"><IMG alt="Cliquez pour Zoomer" SRC="images/serv_web_2.gif" name="img1" vspace="10" hspace="8" class="photo2-sej" border="0" ALIGN="top"></a>
		</td>
		<td>
			<div id="showloupe1"><a href="images/serv_web_3.gif" onClick="return zoom2('images/serv_web_3.gif',event)"></a></div>
			<a href="images/serv_web_3.gif" onClick="return zoom2('images/serv_web_3.gif',event)"><IMG alt="Cliquez pour Zoomer" SRC="images/serv_web_3.gif" name="img1" vspace="10" hspace="8" class="photo2-sej" border="0" ALIGN="top"></a>
		</td>
		<td>
			<div id="showloupe1"><a href="images/serv_web_4.gif" onClick="return zoom2('images/serv_web_4.gif',event)"></a></div>
			<a href="images/serv_web_4.gif" onClick="return zoom2('images/serv_web_4bis.gif',event)"><IMG alt="Cliquez pour Zoomer" SRC="images/serv_web_4.gif" name="img1" vspace="10" hspace="8" class="photo2-sej" border="0" ALIGN="top"></a>
		</td>
	</tr>
</table>
<p>Lorsque vous arrivez à la fenêtre "Server Information", remplissez les champs comme ceci:<br/>
		<pre>Network Domain: localhost
Server Name: localhost
Admin Email: (votre email)
		
[<strong>coché</strong>]: for All Users, on Port 80, as a Service
		</pre>
		Continuer l'installation par défaut.</p>
<table>
	<tr>
		<td>
			<div id="showloupe1"><a href="images/serv_web_5.gif" onClick="return zoom2('images/serv_web_5.gif',event)"></a></div>
			<a href="images/serv_web_5.gif" onClick="return zoom2('images/serv_web_5.gif',event)"><IMG alt="Cliquez pour Zoomer" SRC="images/serv_web_5.gif" name="img1" vspace="10" hspace="8" class="photo2-sej" border="0" ALIGN="top"></a>
		</td>	
		<td>
			<div id="showloupe3"><a href="images/serv_web_6.gif" onClick="return zoom2('images/serv_web_6.gif',event)"></a></div>
			<a href="images/serv_web_6.gif" onClick="return zoom2('images/serv_web_6.gif',event)"><IMG alt="Cliquez pour Zoomer" SRC="images/serv_web_6.gif" name="img1" vspace="10" hspace="8" class="photo2-sej" border="0" ALIGN="top"></a>
		</td>
		<td>
			<div id="showloupe1"><a href="images/serv_web_7.gif" onClick="return zoom2('images/serv_web_7.gif',event)"></a></div>
			<a href="images/serv_web_7.gif" onClick="return zoom2('images/serv_web_7.gif',event)"><IMG alt="Cliquez pour Zoomer" SRC="images/serv_web_7.gif" name="img1" vspace="10" hspace="8" class="photo2-sej" border="0" ALIGN="top"></a>
		</td>
		<td>
			<div id="showloupe1"><a href="images/serv_web_8.gif" onClick="return zoom2('images/serv_web_8.gif',event)"></a></div>
			<a href="images/serv_web_8.gif" onClick="return zoom2('images/serv_web_8.gif',event)"><IMG alt="Cliquez pour Zoomer" SRC="images/serv_web_8.gif" name="img1" vspace="10" hspace="8" class="photo2-sej" border="0" ALIGN="top"></a>
		</td>
		<td>
			<div id="showloupe1"><a href="images/serv_web_9.gif" onClick="return zoom2('images/serv_web_9.gif',event)"></a></div>
			<a href="images/serv_web_9.gif" onClick="return zoom2('images/serv_web_9.gif',event)"><IMG alt="Cliquez pour Zoomer" SRC="images/serv_web_9.gif" name="img1" vspace="10" hspace="8" class="photo2-sej" border="0" ALIGN="top"></a>
		</td>
	</tr>
</table>		
	</li>

Golmote

6 août 2009 à 17:15:38

Comme ceci ?

function zoom2(which, e, position, imgwidth, imgheight){
if (ie||ns6){
crossobj=document.getElementById? document.getElementById("showimage") : document.all.showimage
// ICI POUR REGLER LA POSITION DE LA LOUPE PAR RAPPORT A LA PAGE

crossobj.innerHTML='<div align="right" id="dragbar" class="txt-bold"><span id="closetext" onClick="closepreview()">&raquo; Fermer</span></div><img src="'+which+'">'
crossobj.style.visibility="visible"

crossobj.style.left=((window.innerWidth - crossobj.offsetWidth)/2)+"px"
crossobj.style.top=((window.innerHeight - crossobj.offsetHeight)/2)+"px"
return false
}
else //if NOT IE 4+ or NS 6+, affiche image ds le navigateur en pleine page
return true
}

Sephirius

6 août 2009 à 19:28:17

En faite c'est presque ca...

Le problème est que quand je scroll ma page et que je clique sur une autre dia, le zoom fonctionne mais garde le même point de centrage que pour la première dia. En gros si la première dia est en haut de page le zoom ce fait en haut de page. Et pr voir le zoom de la dernière je dois remonter au scroll tt la page.

J'aimerais éviter ca. Quitte a changer tout le code.
J'aimerais arriver a avoir l'image en zoom à la mm hauteur (que la dia)

pas compréhensible regarder icihttp://81.245.141.238:90/
(c'est une ip dynamique, donc à minuit elle changera)

Golmote

7 août 2009 à 2:27:44

Comme ça ?

function zoom2(which, e, position, imgwidth, imgheight){
if (ie||ns6){
crossobj=document.getElementById? document.getElementById("showimage") : document.all.showimage
// ICI POUR REGLER LA POSITION DE LA LOUPE PAR RAPPORT A LA PAGE


crossobj.innerHTML='<div align="right" id="dragbar" class="txt-bold"><span id="closetext" onClick="closepreview()">&raquo; Fermer</span></div><img src="'+which+'">'
crossobj.style.visibility="visible"

crossobj.style.left=((window.innerWidth - crossobj.offsetWidth)/2+document.body.scrollLeft)+"px"
crossobj.style.top=((window.innerHeight - crossobj.offsetHeight)/2+document.body.scrollTop)+"px"
return false
}
else //if NOT IE 4+ or NS 6+, affiche image ds le navigateur en pleine page
return true
}

Sephirius

7 août 2009 à 12:05:03

Je suis vraiment désolé ce n'est pas encore le résultat que j'attend.
Je me demande si ce que je veux n'est pas impossible...

La page en question Le mieux est d'essayer la page toi même tu verras en quoi elle me pose problème (j'ai bien mis ton code dedans et mis l'ancien en commentaire)

Encore merci

Golmote

7 août 2009 à 14:09:44

Hm... bizarre ça fonctionnait chez moi en local, mais pas sur ton site.

Bref, essaie comme ça :

function zoom2(which, e, position, imgwidth, imgheight){
if (ie||ns6){
crossobj=document.getElementById? document.getElementById("showimage") : document.all.showimage
// ICI POUR REGLER LA POSITION DE LA LOUPE PAR RAPPORT A LA PAGE


crossobj.innerHTML='<div align="right" id="dragbar" class="txt-bold"><span id="closetext" onClick="closepreview()">&raquo; Fermer</span></div><img src="'+which+'">'
crossobj.style.visibility="visible"

crossobj.style.left=((window.innerWidth - crossobj.offsetWidth)/2+window.pageXOffset)+"px"
crossobj.style.top=((window.innerHeight - crossobj.offsetHeight)/2+window.pageYOffset)+"px"
return false
}
else //if NOT IE 4+ or NS 6+, affiche image ds le navigateur en pleine page
return true
}

Sephirius

7 août 2009 à 16:17:01

Ca n'a pas marché non plus... va savoir pourquoi...

J'ai pris un autre javascript pour le faire ca marche bien aussi.

Encore merci de t'être intéressé à mon projet.

Je pense qu'il est temps de m'investir dans le javascript et l'ajax.