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

Question

Sujet Précédent Sujet Suivant

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

Signaler

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

A voir également:

Pop js
Centrer popup - Meilleures réponses
Js pop - Meilleures réponses
Javascript : Fenêtre & Pop-up - Sources , plus de 50 000 CodeS-SourceS. - Guide
PHP + JS pour une pop ouverte une fois par visite ✓ - Forum - Javascript / DHTML
Poo js - Conseils pratiques - Javascript
Drag and drop canvas js - Guide
Menu déroulant js - Guide

3 réponses

Répondre Posez votre question

cgandco · Answer 1 · 2014-11-20T15:40:57+0100

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

darksam0000 · Answer 2 · 2014-11-20T18:13:56+0100

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;  
}

cgandco · Answer 3 · 2014-11-21T16:36:42+0100

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.

Votre réponse