1. Accueil
  2. Forum Codes-Sources
  3. Javascript / DHTML
Sujet Précédent Sujet Suivant

Centrer un Pop-up (JS)

Résolu
darksam0000
Messages postés
132
Date d'inscription
mardi 24 juin 2008
Statut
Membre
Dernière intervention
27 septembre 2020
 - Modifié par darksam0000 le 20/11/2014 à 10:53
cgandco
Messages postés
219
Date d'inscription
mercredi 26 octobre 2011
Statut
Membre
Dernière intervention
22 juin 2017
 - 21 nov. 2014 à 16:36
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

3 réponses

Réponse 1 / 3
cgandco
Messages postés
219
Date d'inscription
mercredi 26 octobre 2011
Statut
Membre
Dernière intervention
22 juin 2017
 9
20 nov. 2014 à 15:40
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
0
Réponse 2 / 3
darksam0000
Messages postés
132
Date d'inscription
mardi 24 juin 2008
Statut
Membre
Dernière intervention
27 septembre 2020
 1
Modifié par darksam0000 le 20/11/2014 à 18:20
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;  
}
0
Réponse 3 / 3
cgandco
Messages postés
219
Date d'inscription
mercredi 26 octobre 2011
Statut
Membre
Dernière intervention
22 juin 2017
 9
Modifié par cgandco le 21/11/2014 à 16:38
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.
0