JQuery Alignment - Относительно окна браузера?

Question

С помощью различных веб-сайтов я создал очень простое всплывающее окно, используя javascript, который содержит мою контактную информацию.Я доволен тем, как это работает, за исключением того, что всплывающее окно отображается абсолютно, и я хочу, чтобы оно отображалось относительно окна браузера (т.е. я хочу, чтобы всплывающее окно отображалось в центре окна браузера, независимо от того,где вы находитесь на странице, когда вы нажимаете значок информации).

Мне удобно с HTML, но не с JavaScript.Я знаю, что относительное позиционирование в javascript работает очень по-разному, но я не могу понять, как это исправить.Любой совет будет оценен.

Веб-страница здесь: http://www.thirstlabmedia.com/

Сценарий выглядит следующим образом:

<script type="text/javascript">
function toggle( div_id ) {
    var el = document.getElementById( div_id );
    if( el.style.display == 'none' ) {
        el.style.display = 'block';
    }
    else {
        el.style.display = 'none';
    }
}
function blanket_size( popUpDivVar ) {
    if( typeof window.innerWidth != 'undefined' ) {
        viewportheight = window.innerHeight;
    }
    else {
        viewportheight = document.documentElement.clientHeight;
    }
    if( ( viewportheight > document.body.parentNode.scrollHeight ) && ( viewportheight > document.body.parentNode.clientHeight ) ) {
        blanket_height = viewportheight;
    }
    else {
        if( document.body.parentNode.clientHeight > document.body.parentNode.scrollHeight ) {
            blanket_height = document.body.parentNode.clientHeight;
        }
        else {
            blanket_height = document.body.parentNode.scrollHeight;
        }
    }
    var blanket = document.getElementById( 'blanket' );
    blanket.style.height = blanket_height + 'px';
    var popUpDiv = document.getElementById( popUpDivVar );
    popUpDiv_height = window.innerHeight / 2 - 200;
    popUpDiv.style.top = popUpDiv_height + 'px';
}
function window_pos( popUpDivVar ) {
    if( typeof window.innerWidth != 'undefined' ) {
        viewportwidth = window.innerHeight;
    }
    else {
        viewportwidth = document.documentElement.clientHeight;
    }
    if( ( viewportwidth > document.body.parentNode.scrollWidth ) && ( viewportwidth > document.body.parentNode.clientWidth ) ) {
        window_width = viewportwidth;
    }
    else {
        if( document.body.parentNode.clientWidth > document.body.parentNode.scrollWidth ) {
            window_width = document.body.parentNode.clientWidth;
        }
        else {
            window_width = document.body.parentNode.scrollWidth;
        }
    }
    var popUpDiv = document.getElementById( popUpDivVar );
    window_width = window_width / 2 - 200;
    popUpDiv.style.left = window_width + 'px';
}
function popup( windowname ) {
    blanket_size( windowname );
    window_pos( windowname );
    toggle( 'blanket' );
    toggle( windowname );
}
</script>

(Мои извинения за размещение все на одномлиния; веб-сайт создается через Cargo Collective, и он не принимает сценарий, если только он не помещен в одну строку).

Answer 1

Использовать CSS position : fixed:

#my-element {
    position : fixed;
    top      : 50%;
    left     : 50%;
    margin   : -100px 0 0 -250px;
    width    : 500px;
    height   : 200px;
    z-index  : 1000;
}

Вот демоверсия: http://jsfiddle.net/huRcV/1/

Это центрирует элемент размером 500x200px в viewport. Отрицательные поля используются для центрирования элемента относительно его размеров. Если пользователь прокручивает страницу, элемент остается по центру в viewport.

Документы для position: https://developer.mozilla.org/en/CSS/position

исправлена ​​

Не оставляйте места для элемента. Вместо этого поместите это в указанная позиция относительно области просмотра экрана и не перемещается когда прокручивается При печати поместите его в это фиксированное положение на каждая страница.

Вы можете сделать это с помощью JavaScript, но, вероятно, лучше использовать версию CSS. Если вы хотите использовать jQuery, вот небольшой пример:

var $myElement = $('#my-element');
$(window).on('scroll resize', function () {
    $myElement.css({
        top : ($(this).scrollTop() + ($(this).height() / 2)),
    });
});

Вот демо: http://jsfiddle.net/huRcV/ (обратите внимание, что position : fixed для этого демо изменено на position : absolute)