javascript - Lightbox 2 关于弹窗定位的逻辑是什么？

Question

Lightbox 2关于弹窗定位的逻辑是什么？

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

它用于确定定位的 CSS 或逻辑是什么？

Answer 1

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

以下是脚本本身计算弹出窗口顶部位置的方式（lightbox v2.04，zip 下载，js/lightbox.js，第 229 行）：

// 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

在第 231 行，lightbox.js将除以 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*/
}