Centrer une popup dans un écran

**tfreche** · 19/06/2019, 15h50

Bonjour à tous,

tout d'abord excusez moi si je ne poste pas au bon endroit mais je suis un très très très grand débutant et votre site est très (trop ?) complet sur les langages de programmation pour moi.
initialement dans le développement d'un petit site sans prétention qui mêle du php et de l'html, j'ai voulu faire une popup ... c'est tout nouveau comme activité personnelle .
j'ai lu en ligne beaucoup d'articles donnant moult exemples dont un qui fonctionne.
par malchance, il n'y a pas le code source complet et mis à part que cela doit (devrait ?) fonctionner, mon code reste un des mystères de l'informatique pour moi ...
j'ai fait une recherche dans le forum avec popup mais n'ai rien trouvé en rapport avec mon souci.
je dois faire une erreur mais je ne sais où ?
voici mon source qui est dans un html pour lancer la popup :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script type="text/javascript">
            var width = 300; 
            var height = 160; 
            var left = Math.floor((screen.width-width)/2); 
            var top = Math.floor((screen.height-height)/2);
            var options ='directories=no, menubar=no, status=no, location=no, scrollbars=no, resizable=no, fullscreen=no';
            function ouvre_popup(page) 
                     { window.open(page,"Veuillez vous identifier.", "top="+top+",left="+left+",width="+width+",height="+height+","+options); } 
        </script>
    </head>
    <body>
        <a href="javascript:ouvre_popup('loginpass.html')">Ouverture d'un popup</a>
    </body>
</html>

le résultat est le suivant :
en cliquant mon lien la popup s'affiche avec la bonne taille.
son contenu est celui de loginpass.html qui lance en cliquant sur le bouton le fichier validpass.php.
le tout fonctionne sur apache inclus dans wamp.

là où l'affaire se corse, c'est que la boite de popup se place bien horizontalement au centre de mon écran mais refuse toujours de se placer au centre sur la verticale.
le left est bien géré mais pas le top en fait.
le problème est que même en fixant une valeur de position, c'est toujours pareil.

j'avais pensé à un problème de résolution d'écran avant de voir le fonctionnement de l'exemple que je vous ai cité plus haut.
j'ai contacté l'administrateur de ce site mais ma demande est restée lettre morte quant à son code source ...

pourriez vous avoir la bonté de m'aider ? cela fait une semaine que je cherche, que je lis des bouquins en ligne en rapport avec les popups java et je reste impuissant.

en remerciant ceux qui me dépanneront,
bien cordialement à vous.

**NoSmoking** · 20/06/2019, 14h47

Bonjour,
ton problème est sournois et concerne l'utilisation de la variable top, qui au moment de l'utilisation n'est autre que le document.

Place tout le code dans la fonction.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
function ouvre_popup(page) {
  var width = 300;
  var height = 160;
  var left = Math.floor((screen.width - width) / 2);
  var top = Math.floor((screen.height - height) / 2);
  var options = 'directories=no, menubar=no, status=no, location=no, scrollbars=no, resizable=no, fullscreen=no';
  window.open(page, "Veuillez vous identifier.", "top=" + top + ",left=" + left + ",width=" + width + ",height=" + height + "," + options);
}

Centrer une popup dans un écran

JavaScript

Discussions similaires

Partager

Partager