[Résolu]Centrer une popup

Bonjour à tous,

Bien que j'ai pu lire beaucoup de choses sur ce sujet et me suis efforcé de les mettre en pratique impossible d'arriver à centrer ma popup correctement.

Comme une image vaut plus que de long discours je vous renvoi vers mon site de démonstration : http://www.mywebshop.org/_work/contact.php où vous n'aurez bien sur qu'à cliquer sur "ouvrir la popup" pour constater le soucis (en tout cas sur FF, Chrome et Safari).

Et bien sur voici le code utilisé pour "centrer" cette popup (code trouvé sur un forum où apparemment il était censé fonctionner à merveilles :s) :

function centerPopup() {
        //request data for centering            
        var scrollTop = (document.documentElement && document.documentElement.scrollTop) || window.pageYOffset || self.pageYOffset || document.body.scrollTop;
        var scrollLeft = (document.documentElement && document.documentElement.scrollLeft) || window.pageXOffset || self.pageXOffset || document.body.scrollLeft;
        var windowWidth = document.documentElement.clientWidth;
        var windowHeight = document.documentElement.clientHeight;
        var popupHeight = $("#popupContact").height();
        var popupWidth = $("#popupContact").width();
        //centering
        $("#popupContact").css({
            "position": "absolute",
            "top": windowHeight / 2 - popupHeight / 2 + scrollTop,
            "left": windowWidth / 2 - popupWidth / 2 + scrollLeft
        });

        //only need force for IE6
        $("#backgroundPopup").css({
            "height": windowHeight + windowHeight / 2 - popupHeight / 2 + scrollTop,
            "width": windowWidth + windowWidth / 2 - popupWidth / 2 + scrollLeft
        });
}

Merci d'avance pour toute aide dans mon soucis
Modifié par mettosjester (14 Jun 2010 - 13:22)

Après avoir essayé de jouer avec les différents paramètres je nage complètement un oeil frais extérieur serait plus que bienvenu car je suis totalement bloqué... snif

Bonjour,

à vue de pif, je dirais que tu récupères la hauteur et la largeur de ta PAGE et pas de la partie utile de ton navigateur dans laquelle s'affiche ta page morceau par morceau à l'aide d'un ascenseur vertical, partie affichée que l'on appelle aussi viewport.

Un petit test : va sur ta page, agrandis ta fenêtre au maximum et affiche Firebug à l'onglet Console. À droite tape :

document.documentElement.clientWidth;
document.documentElement.clientHeight;

et exécute. Note les valeurs obtenues à gauche.
Maintenant modifie la taille de ta fenêtre de Firefox pour qu'elle ne fasse en hauteur que la moitié de la hauteur de ton bureau. Réexécute les deux lignes de code, tu devrais obtenir une valeur plus faible puisque ta fenêtre est moins haute n'est-ce pas ? Or non tu obtiens exactement la même valeur parce que ta page HTML fait toujours la même hauteur en pixels, que ton écran fasse 768px ou 1200px de haut
C'est donc WxH du viewport qu'il faut utiliser, sinon tes formules semblent OK

En effet Felipe tu as entièrement raison... mais la question à 100 euros est donc : "comment récupérer la Width et surtout Height du Viewport ?"

Bonjour,

Voici une classe que j'ai développé avec Protoype et scriptaculous :

var ObjSite = {};
ObjSite = Class.create();

ObjSite.prototype = 
	{
		initialize : function()
		{

		},
		width: function()
		{
			var myWidth = 0;
			if (typeof(window.innerWidth) == 'number')
			{
				//Non-IE
				myWidth = window.innerWidth;
			}
			else if (document.documentElement && document.documentElement.clientWidth)
			{
				//IE 6+ in 'standards compliant mode'
				myWidth = document.documentElement.clientWidth;
			}
			else if (document.body && document.body.clientWidth)
			{
				//IE 4 compatible
				myWidth = document.body.clientWidth;
			}
			return myWidth;
		},
		height: function()
		{
			var myHeight = 0;
			if (typeof(window.innerHeight) == 'number')
			{
				//Non-IE
				myHeight = window.innerHeight;
			}
			else if (document.documentElement && document.documentElement.clientHeight)
			{
				//IE 6+ in 'standards compliant mode'
				myHeight = document.documentElement.clientHeight;
			}
			else if (document.body && document.body.clientHeight)
			{
				//IE 4 compatible
				myHeight = document.body.clientHeight;
			}
			return myHeight;
		},
		PositionnerFenetre : function(element)
		{
			var Largeur = Element.getWidth($(element));
			var Hauteur = Element.getHeight($(element));
			var PositionLeft = Math.round(this.width()/2) - (Largeur/2);
			var PositionTop = document.documentElement.scrollTop + (this.height()/2) - Math.round(Hauteur/2);
			$(element).setStyle( { top: PositionTop + 'px', left : PositionLeft + 'px' } );
		},
		OuvrirFenetre : function(Fenetre)
		{
			this.PositionnerFenetre(Fenetre);
			Fenetre.appear();
		}
	}

La méthode width donne la largeur de l'écran
La méthode height donne la hauteur de l'écran visible
La méthode PositionnerFenetre positionne le popup en fonction de sa hauteur et de sa largeur.
La méthode OuvrirFenetre affiche la fenêtre.

En espérant que cela t'aide