Javascript центрирует div на странице

Question

Для javascript я использую фреймворк jQuery, но могу легко интегрировать в него любые функции javascript. Проблема в том, что у меня есть div, который исчезает, когда я нажимаю на ссылку. Как мне заставить его выровняться по центру страницы и остаться даже при прокрутке.

Ниже приведен пример того, что я сейчас реализовал:

HTML код:

<div id="dividname">
    <h2>Heading Goes Here</h2>
    <p>content goes here</p>

    <p><a href="#" class="close-box">Close Box</a></p>
</div>

Код CSS:

#dividname {
    position:absolute; z-index:100; width:600px; height:600px; display:none;
}

JQuery код:

$(document).ready(
    function() {

        // on click show div
        $('a.popup').click(
            function() {
                $('#dividname').fadeIn('slow');
            }
        }

    }
);

Answer 1

Попробуйте это:

#dividname {
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -300px;
    margin-left: -300px;
    z-index: 100;
    width: 600px;
    height: 600px;
}

Где margin-top и margin-left - половина от height и width соответственно.

Answer 2

попробуйте модальный div для jquery

Этот инструмент позаботится о перемещении за вас, если пользователь прокрутит

// to show
$.blockUI({ message: $('[id$=div]'),
    css: 
    {
        top: 50%;
        left: 50%;
        margin-top: -300px;
        margin-left: -300px;
    }
 });

// to hide                                    
$.unblockUI({ message: $('[id$=div]') });

Answer 3

Попробуйте изменить свой стиль на это,

#dividname {

z-index:100; width:600px; height:600px;
position: fixed;
top: 50%;
left: 50%;

}

Надеюсь, это поможет!

Edit:

Кстати, вот хак, чтобы заставить его работать и в IE6,

* html #dividname {
 position: absolute;
 top: expression((document.documentElement.scrollTop || document.body.scrollTop) +
 Math.round(17 * (document.documentElement.offsetHeight || document.body.clientHeight) /
 100) + 'px');
}

(взято из таблицы стилей jqModal)

Answer 4

Чтобы держать его в центре прокрутки, вам нужно добавить функцию, чтобы переместить его в положение прокрутки.

Вы можете сделать это с:

$(window).scroll(resize())

Получите вашу текущую позицию с:

$(window).scrollTop();

Это будет соответствовать проблемам IE6.