Discussion :

[leaemile]

Bonjour à tous,

Il est vrai que parfois les voies de l'informatique sont impénétrables...

Voici mon problème :
En cliquant sur une image je désire ouvrir une fenêtre modale ou un pop up (j'hésite entre l'une ou l'autre dénomination !!) en cherchant à la centrer sur l'écran.
Tout se passe très bien sur un écran de taille 1366x637, mais sur un autre écran de taille 1280x933 ma fenêtre est bien centrée verticalement mais non horizontalement, elle se trouve sur le bord gauche de l'écran.
La taille de ma fenêtre étant de 770x446, la valeur attribuée à left doit être de 298 pour le premier écran et 255 pour l'autre, donc pourquoi ce problème ?

Voici mon code en javascript :

Code javascript :

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

1
2
3
4
5
6
7
8
9
10
11
		function ouverture(delib,largeur,hauteur)
		{
			if (window.innerWidth)
			{
				var gauche=(window.innerWidth-largeur)/2;
				var haut=(window.innerHeight-hauteur)/2;
			}
		 window.open(delib,"","menubar=no, resizable=no, width=" +largeur+" ,height=" +hauteur+" ,left=" +gauche+" top=" + haut);
		}
	//-->
	</script>

et l'appel de la fonction en php

Code html :

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

1
2
 
... onclick="ouverture('delib_1.jpg',770,446);"

Merci de bien accepter d'essayer de résoudre ce problème.

[NoSmoking]

Bonjour,

En cliquant sur une image je désire ouvrir une fenêtre modale ou un pop up (j'hésite entre l'une ou l'autre dénomination !!)

comme tu utilises window.open il s'agit bien d'une « popup ».

Je ne vais pas répondre à ton pourquoi mais te conseiller de regarder du coté des « lightBox» qui sont très facile à mettre en oeuvre, et à centrer via le CSS.

[leaemile]

Je ne vais pas répondre à ton pourquoi mais te conseiller de regarder du coté des « lightBox» qui sont très facile à mettre en oeuvre, et à centrer via le CSS.

Merci NoSmoking,
Je suis tout à fait d'accord avec toi, d'autant plus que j'utilise les "lightBox" agencées via le CSS, mais comme je veux mettre en exergue plusieurs "images" de tailles différentes alors que la fenêtre crée par la "lightBox" a une taille prédéfinie (à moins que dans le CSS je puisse la paramétrer ?), cela ne fait pas très joli. Donc j'ai poussé la curiosité un peu plus loin en utilisant le bout de code présenté plus haut. Et quelle fut ma surprise en apercevant l’inconvénient explicité.

Je vais me simplifier la tâche en utilisant des 'lightbox" mais toutefois, curiosité oblige, j'aimerais connaître la raison de cet inconvénient, sans plus.

Merci, au plaisir.

[NoSmoking]

Il semblerait que tu « confusionnes » entre la fenêtre d'affichage et la largeur de l'écran ce qui peut-être notablement différent.

En utilisant les données de l'écran cela pourrait donner cela :

Code :

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

1
2
3
4
5
function ouverture(delib, largeur, hauteur) {
  var gauche = (screen.width - largeur) / 2;
  var haut = (screen.height - hauteur) / 2;
  window.open(delib, '', 'menubar=no, resizable=no, width=' + largeur + ' ,height=' + hauteur + ' ,left=' + gauche + ' top=' + haut);
}

[dominos]

Bonjour,

Avec bootstrap, vous pouvez aussi réaliser cela très simplement,

http://v4-alpha.getbootstrap.com/components/modal/

[eleydet]

Bonsoir,

Serait-ce une virgule manquante (avant le "top")?

Code :

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

window.open(delib,"","menubar=no, resizable=no, width=" +largeur+" ,height=" +hauteur+" ,left=" +gauche+", top=" + haut);

Ou, peut-être, un problème de nombre décimal?

Code :

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

1
2
var gauche=Math.floor((window.innerWidth-largeur)/2);
var haut=Math.floor((window.innerHeight-hauteur)/2);

[NoSmoking]

Serait-ce une virgule manquante (avant le "top")?

c'est effectivement potentiellement un soucis sur certains navigateurs et je vois, après test, que FireFox rechigne.

Le soucis principal dans cette démarche est, me semble t-il, que la nouvelle fenêtre se place par rapport à l'écran et non par rapport à la fenêtre qui l'a ouverte.

[leaemile]

Bonjour NoSmoking,
Je comprends, mais pourquoi ce souci n'apparaît pas sur certains écrans ?
Merci d'avoir consacré un peu de ton temps à essayer de répondre à ma question.

Merci également aux autres intervenants, et malgré leurs conseils rien n'y fait

Bonne journée

[NoSmoking]

Quel code utilises-tu ?
As tu fais un console.log des valeurs lues ?