Quelle est la logique de Lightbox 2 sur où positionner le popup?

Question

Quelle est la logique de Lightbox 2 sur où positionner le popup?

Il semble que lorsque vous utilisez Firefox ou Chrome, il apparaît à différents endroits sur des pages différentes. Existe-t-il un paramètre permettant de l'afficher à la même hauteur sur chaque page pour la cohérence?

Quel est le CSS ou la logique qu'il utilise pour déterminer le positionnement?

Answer 1

De quelle manière est-il affiché à différents endroits, quel est votre comportement souhaité, et pouvez-vous donner un exemple de page?

Voici comment le script lui-même calcule la position haut de la fenêtre contextuelle (lightbox v2.04, zip télécharger, js/lightbox.js, lignes 229ff):

// calculate top and left offset for the lightbox 
var arrayPageScroll = document.viewport.getScrollOffsets(); 
var lightboxTop = arrayPageScroll[1] + (document.viewport.getHeight()/10); 
var lightboxLeft = arrayPageScroll[0]; 
this.lightbox.setStyle({ top: lightboxTop + 'px', left: lightboxLeft + 'px' }).show(); 

Comme le script utilise Prototype's document.viewport object, la le script positionne les popups à 10% à l'intérieur de la position actuelle du défilement, comme ceci:

------- page start 
| 
| 
| 
| 
| 
------- scroll position top 
| 
------- start of lightbox popup 
| 
| 
| 
| 
| 
| 
| 
| 
------ scroll position bottom 
| 
| 
| 
| 
------ page end 

Answer 2

#lightbox{ 
position: absolute; 
top: 100px !important; /*I foxed it 100px from the top, you could fix it as much pixels as you wish*/ 
} 

Answer 3

Vous pouvez essayer Flowplayer:

http://flowplayer.org/tools/demos/index.html

Vous pouvez définir le positionnement et la taille de votre superposition via le fichier CSS à l'endroit où vous voulez.

Answer 4

Je sais que c'est un très vieux fil, mais toujours top 5 google résultats. IE/FF me donne de bons résultats mais Chrome ne le fait pas. Pour les obtenir tous compatibles,

ligne 231 de js/lightbox.js

a été changé pour

var lightboxTop = arrayPageScroll[1] + (100); 

Pas exactement ce qui a été demandé, mais les pages sont cohérentes maintenant.

Infos prise de http://www.lokeshdhakar.com/forums/discussion/5494/fixed-display-position-problems-with-firefox-but-not-ie-on-tall-webpages/p1

Answer 5

En ligne 231 à lightbox.js ajuster la division par 10 à 100 comme ceci:

document.viewport.getHeight()/100

Exemple de code:

// calculate top and left offset for the lightbox 
    var arrayPageScroll = document.viewport.getScrollOffsets(); 
    var lightboxTop = arrayPageScroll[1] + (document.viewport.getHeight()/100); // 
    var lightboxLeft = arrayPageScroll[0]; 
    this.lightbox.setStyle({ top: lightboxTop + 'px', left: lightboxLeft + 'px' }).show();