CSS Image Viewer - Aligner le centre de l'écran

Question

Je souhaite utiliser l'agrandisseur/visualiseur d'image ci-dessous, mais je souhaite que la fenêtre contextuelle de l'image agrandie apparaisse au centre de l'écran.

http://www.dynamicdrive.com/style/csslibrary/item/css_smart_image_enlarger/

J'ai essayé bien des égards, mais sans succès ....

Toute aide sur ce serait très apprécié.

Answer 1

Vous pouvez faire comme si vous avez été un fixe avec ..

.popup { position: absolute; largeur: 140px; marge gauche: -70px; en haut: 0px; gauche: 50%; }

Answer 2

Pour résoudre ces problèmes, j'interroge habituellement le DOM avec JavaScript pour connaître la taille de la fenêtre. J'utilise ensuite:

document.getElementById('popup').style.top = window_height - popup_height/2; 
document.getElementById('popup').style.left = window_width - popup_width/2; 

Le positionnement du popup doit être défini sur 'absolute' dans le CSS. Pour obtenir la hauteur (même pour la largeur) J'utilise:

if (document.body.clientHeight) { 
    window_height = document.body.clientHeight; 
} else { 
    window_height = window.innerHeight; 
} 

Si votre div ne dispose pas d'un identifiant, vous pouvez toujours passer la référence d'objet à la fonction JavaScript comme:

<div class='popup' onmouseover='javascript:openPopup(this);'> ... </div> 

Et, une pièce voisine de code:

function openPopup(element) { 

    // Get window's height and width using the code above 

    element.style.top = window_height - popup_height/2; 
    element.style.left = window_width - popup_width/2; 

} 

C'est, au lieu d'interroger les DOM pour obtenir l'objet de l'ID, vous passez directement l'objet à la fonction JavaScript.