Posez votre question Signaler

Centrer un Pop-up (JS) [Résolu]

Messages postés
130
Date d'inscription
mardi 24 juin 2008
Dernière intervention
17 juin 2018
 -
Javascript / DHTML Posez votre question Signaler
Bonjour,

Question simple : comment pourrais-je faire pour centrer sur les écrans, mon pop-up avec le code source JS que voici :

Code source JavaScript : 
var popUp = document.getElementById("popupcontent");
    popUp.style.top = "30%";
    popUp.style.left = "50%";
    popUp.style.width = w + "px";
    popUp.style.height = h + "px";
    
      if (baseText == null) baseText = popUp.innerHTML;
   popUp.innerHTML = baseText + 
      "<div id=\"statusbar\"><button onclick=\"hidePopup();\">Fermer cette page</button></div>";
 
 var baseText = null;
 
function showPopup(w,h){
   var popUp = document.getElementById("popupcontent");
 
   popUp.style.top = "200px";
   popUp.style.left = "200px";
   popUp.style.width = w + "px";
   popUp.style.height = h + "px";
 
   if (baseText == null) baseText = popUp.innerHTML;
   popUp.innerHTML = baseText + 
      "<div id=\"statusbar\"><button onclick=\"hidePopup();\">Fermer cette page</button></div>";
 
   var sbar = document.getElementById("statusbar");
   sbar.style.marginTop = (parseInt(h)-110) + "px";
   popUp.style.visibility = "visible";
}

function hidePopup(){
   var popUp = document.getElementById("popupcontent");
   popUp.style.visibility = "hidden";
}


Je dois avouer que je galère ;p. Qui plus es, je pense qu'il y a une erreur quelque part ...

D'avance merci

Darksam
Afficher la suite 

Votre réponse

Répondre au sujet

3 réponses

Signaler Commenter la réponse de cgandco
Messages postés
219
Date d'inscription
mercredi 26 octobre 2011
Dernière intervention
22 juin 2017
 8
0
Merci
bonjour,

pour centrer le popup horizontalement, place le directement dans le body et dans ton css, il faut lui mettre un position:relative; margin-left:auto; margin-right:auto; width:salargeur; 

<body style="width:100%;">
<div id="tonpopupid" style="position:relative; margin-left:auto; margin-right:auto; width:200px;" >
<les boutons ect.. en position:absolute; + top et left par rapport à ton popup>
</div>


pour ce qui est du centrage vertical, en javascript avec document.body.offsetHeight et autres pour calculer et affecter lle top calculé avec document.getElementById("tonpopupid").style.top = valeur + 'px';

Attention il faut chercher pour équivalent à offsetHeight pour les différents navigateur.

bonne journée
Commenter la réponse de cgandco
Signaler Commenter la réponse de darksam0000
Messages postés
130
Date d'inscription
mardi 24 juin 2008
Dernière intervention
17 juin 2018
 1
0
Merci
Pour le CSS ok j'ai compris, pour le reste pas vraiment ! Quand j'applique ton code source, ça déplace tous mes menus ... un vrai foutoir ...

Pourrais-tu reprendre mon code source et l'adapter stp ?

Et au passage voici mon css qui va avec le code JS : 
#popupcontent{
   position:absolute;
   visibility: hidden;
   overflow: hidden;
   border:10px ridge #999;
   background-image:url(../images/bg-body.jpg);
   background-repeat:repeat;
   font-family:"Agency FB";
   font-size:18px;
   color:#fff;
   text-align:center;  
}
Commenter la réponse de darksam0000
Signaler Commenter la réponse de cgandco
Messages postés
219
Date d'inscription
mercredi 26 octobre 2011
Dernière intervention
22 juin 2017
 8
0
Merci
bonjour,

voila 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script type="text/javascript">
        window.onresize = TheResize ;
        function TheResize()
        {
            larg = (window.innerWidth);
            haut = (window.innerHeight);
            var Mydiv = document.getElementById('MyDiv');
            var TheTop = (haut - 150) / 2;
            Mydiv.style.top = TheTop + "px";
        }
    </script> 
</head>
<body>
    <div id="MyDiv" style="width:200px; height:150px; position:relative; margin-left:auto;margin-right:auto; background-color:red;   ">
        <div style="width:20px; height:20px; position:absolute; top:20px; left:20px; background-color:greenyellow; "></div>
    </div>
</body>
</html>


mais innerHeight a tester dans tous les navigateurs et version de navigateur.

il est prudent de mettre aussi une valeur de top minimum pour ne pas avoir de négatif et des effets ....

bonne journée
Faites simple, aussi simple que possible, mais pas simpliste.
A. Einstein.
Commenter la réponse de cgandco

Votre réponse

Répondre au sujet
Posez votre question
S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.