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

darksam0000 128 Messages postés mardi 24 juin 2008Date d'inscription 5 juillet 2016 Dernière intervention - 20 nov. 2014 à 10:48 - Dernière réponse : cgandco 219 Messages postés mercredi 26 octobre 2011Date d'inscription 22 juin 2017 Dernière intervention
- 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
Afficher la suite 

Votre réponse

3 réponses

cgandco 219 Messages postés mercredi 26 octobre 2011Date d'inscription 22 juin 2017 Dernière intervention - 20 nov. 2014 à 15:40
0
Utile
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
darksam0000 128 Messages postés mardi 24 juin 2008Date d'inscription 5 juillet 2016 Dernière intervention - Modifié par darksam0000 le 20/11/2014 à 18:20
0
Utile
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
cgandco 219 Messages postés mercredi 26 octobre 2011Date d'inscription 22 juin 2017 Dernière intervention - Modifié par cgandco le 21/11/2014 à 16:38
0
Utile
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

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.