0

当您单击某些链接时，我会出现一些 Div。类名为“position-center”的 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>

谢谢！

4

0 回答 0