Lightbox 2 在弹出窗口的位置上的逻辑是什么？

Question

Lightbox 2 在弹出窗口的位置上的逻辑是什么？

似乎当使用 Firefox 或 Chrome 时，它​​会显示在不同页面的不同位置。是否有任何设置可以使其在每个页面上显示在相同的高度以保持一致性？

它使用什么 CSS 或逻辑来确定定位？

Answer 1

它以什么方式显示在不同的地方，您想要的行为是什么，您能提供一个示例页面吗？

以下是脚本本身如何计算弹出窗口的顶部位置（lightbox v2.04，zip 下载，js/lightbox.js，第 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();

由于脚本使用 Prototype 的 document.viewport 对象，脚本将弹出窗口定位在当前滚动位置内的 10% 处，如下所示：

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

Answer 2

我知道这是一个非常古老的线程，但仍然是前 5 名谷歌结果。 IE/FF 给了我很好的结果，但 Chrome 却没有。为了使它们全部一致，

js/lightbox.js 的第 231 行

var lightboxTop = arrayPageScroll[1] + (document.viewport.getHeight() / 10);

更改为“

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

不完全是所请求的内容，但现在页面是一致的”。

信息取自http://www.lokeshdhakar.com/forums/discussion/5494/fixed-display-position-problems-with-firefox-but-not-ie-on-tall-webpages/p1

Answer 3

在 lightbox.js 第 231 行中，将除法调整为 10 到 100，如下所示：

document.viewport.getHeight() / 100

示例代码：

    // 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();

Answer 4

您可以尝试 Flowplayer：

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

您可以通过 CSS 文件将叠加层的位置和大小设置到您想要的任何位置。

Answer 5

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