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

Discussions similaires

Partie entiére d'un nombre
stephbb75 -
stephbb75 -

2 réponses
la division en java
cs_aliomar -
KIRAIII -

3 réponses
condition PHP => fonction JS
xactise -
pcgpegase -

1 réponse
Division entière et décimale
Wenlix -
Whismeril -

1 réponse
Partie entière d'un nombre
Sniper_Vgaerr -
DeAtHCrAsH -

2 réponses
Rejoignez-nous