Отображение содержимого DIV в центре страницы со свитком

Question

мне нужно, чтобы отобразить DIV:

<div class="detailcontainer" id="detailcontainer"></div> 

Класс:

.detailcontainer 
{ 
    position:absolute; 
    visibility:hidden; 
    width:1000px; 
    height:auto; 
    top:50%; 
    left:50%; 
    margin-left:-500px; 
    margin-top:-150px; 
    border-radius:3px; 
    background:rgba(35,31,32,.7); 
    z-index:60; 
} 

в середине страницы со свитком.

На самом деле, DIV появляется в верхней части страницы (здесь видны http://www.izigo.pt/Ad/GetAllByCategory?categoryId=1 и нажмите на автомобиле в нижней части списка, он появится в верхней части)

Как я могу открыть деталь автомобиль в середине видимой области?

Благодаря

Answer 1

Попробуйте

position:fixed; 

вместо

position:absolute 

Он будет держать его в виду, даже если вы перечисляете.

.detailcontainer 
{ 
    position:fixed; 
    visibility:hidden; 
    width:1000px; 
    height:auto; 
    top:50%; 
    left:50%; 
    margin-left:-500px; 
    margin-top:-150px; 
    border-radius:3px; 
    background:rgba(35,31,32,.7); 
    z-index:60; 
} 

DEMO (прокрутите вниз и нажмите кнопку меня)

Answer 2

Попробуйте добавить это к контейнеру:

position: fixed; 

Этот атрибут означает, что top/bottom/right/left - значения вычисляются с границы окна, а не с родительского элемента - неважно, прокручиваетесь ли вы, контейнер всегда останется на своем месте.

положение: абсолютное: В top/bottom/right/left -величины по сравнению с телом-тегом (или любым родительским тегом с position: relative)

положения: относительное: top/bottom/right/left -значения относительно места, где элемент будет без этих атрибутов.

Кроме того, я рекомендую вам очистить свой код css, и особенно: не использовать теги стиля, используйте только css-файлы.

Answer 3

Это невозможно сделать с помощью CSS. Для выполнения этой работы вам нужно немного JavaScript.

попробовать что-то вроде этого:

window.onload = function() { 
    winHeight = window.innerHeight; 
    el = document.getElementsByClassName('detailcontainer')[0]; 
    divHeight = el.clientHeight; 

    el.style.top = (winHeight - divHeight)/2 + 'px'; 
} 

Answer 4

Использование фиксированной позиции вместо позиции: абсолютный;

Исправлены работы как абсолютные, но свиток не влияет на элемент.

Answer 5

jQuery.fn.center = function() { 
     this.css("top", (($(window).height() - this.outerHeight())/2) + $(window).scrollTop() +20+ "px"); 
     //this.css("left", (($(window).width() - this.outerWidth())/2) + $(window).scrollLeft() + "px"); 
     return this; 
    } 

    $(window).scroll(function() { 
     setTimeout(function() { 
      $('#yourdivid').center(); 
     }, 500) 
    });