Jquery - вертикальный центр div работает только при изменении размера окна

Question

У меня есть некоторые Div, которые появляются, когда вы нажимаете на определенные ссылки. Div с именем класса "position-center" вертикальные центры на экране. Но дело в том, что divs смещается по центру при загрузке, пока вы не измените размер окна.

Я попытался выполнить поиск в базе данных вопросов, но не могу найти решение проблемы.

Код Javascript для центрирования и отображения div:

onResize = function() {
        var topPos = ($(window).height() - $('.position-center').outerHeight())/2;
        $('.position-center').css({
            top: topPos > 0 ? topPos : 0
        });
    };
    $(document).ready(function() {
        $(onResize);
        $(window).resize(onResize);
        $(".modal-button").click(function(){
            $("divs:visible").hide();
            $("#"+$(this).attr("data-showdiv")).show();
        });
        $('.abort').click(function() {
            $("div.modal-background").hide();
        });
    });

HTML для одного из Div

 <div class="modal-background" id="modal-1">
    <div class="modal-window">
        <div class="modal-content position-center">
            <span class="title">Modal #2</span>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <a href="#" class="button abort"><span>Abort</span></a>
        </div>
    </div> 

Ссылка для вызова div:

<a class="modal-button" data-showdiv="modal-1" href="#"><span>SHOW DIV</span></a>

Спасибо!