Question

我想使用下面的图像放大器/查看器，但我希望放大图像的弹出窗口出现在屏幕的中央。

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

我尝试了很多方法，但没有成功......

对此的任何帮助都将非常感激。

Answer 1

要解决这些问题，我通常会使用JavaScript查询DOM以找出窗口的大小。然后我用：

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

必须在CSS中将弹出窗口的位置设置为“绝对”。为了获得高度（宽度相同），我使用：

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

如果您的div没有id，您仍然可以将对象引用传递给JavaScript函数，如：

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

而且，在附近的一段代码中：

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;

}

也就是说，不是通过ID查询DOM来获取对象，而是直接将对象传递给JavaScript函数。

Answer 2

如果你修好了，你可以这样做..

.popup { 位置：绝对; 宽度：140px; margin-left：-70px; 顶部：0px; 左：50％; }

CSS图像查看器 - 对齐屏幕中心

2 个答案: