CSS Image Viewer - выравнивание по центру экрана

Question

Я хочу использовать увеличитель / просмотрщик изображений, показанный ниже, но мне бы хотелось, чтобы всплывающее окно увеличенного изображения отображалось в центре экрана.

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

Я пробовал много способов, но безуспешно ....

Любая помощь по этому вопросу будет принята с благодарностью.

Answer 1

Чтобы решить эти проблемы, я обычно запрашиваю DOM с помощью JavaScript, чтобы узнать размер окна. Я тогда использую:

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 нет идентификатора, вы все равно можете передать ссылку на объект в функцию 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;

}

То есть вместо того, чтобы запрашивать DOM для получения объекта по идентификатору, вы напрямую передаете объект в функцию JavaScript.

Answer 2

Вы могли бы сделать это, если у вас есть исправлено с ..

.popup { положение: абсолютное; ширина: 140 пикселей; поле слева: -70px; верх: 0px; слева: 50%; }