Question

当您点击某些链接时，我会显示一些Div。具有班级名称＆＃34;位置中心＆＃34;的div屏幕上的垂直中心。但事实是，在你调整窗口大小之前，div会在负载中偏移。

我试图搜索问题数据库，但我似乎无法找到问题的解决方案。

用于居中和显示div的Javascript代码：

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();
        });
    });

其中一个Div的HTML

 <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>

谢谢！

Jquery - 垂直居中div仅在调整窗口大小时起作用

0 个答案: