Question

我有一个测试网站，我正在努力转换一个小应用程序，我做了响应。它的工作但有一件事被打破了;当您调整浏览器窗口的大小时，当您垂直调整大小时，居中的div不会保持居中。水平调整大小可以正常工作。

您可以点击此链接查看：http://www.friendlierpizza.com/index2.php现在只需向下滚动并点击：STORE HOURS。您将看到模态，并尝试垂直调整浏览器大小并失败。

在第71行的包含behavior.js文件中，我认为代码应该是90。或者看看复制/粘贴。

function resizeModal() {
    if ($currentId === false) return;
    var winW = $(window).width();
    $currentId.css('left', winW / 2 - $currentId.width() / 2);
}

$('a[name=modal]').click(function(e) {
    $(this).addClass("selected"); 
    $('html, body').animate({ scrollTop: 0 }, 0);
    $('#mask').hide(0);
    $('.window').hide(0);
    e.preventDefault(); 
    var id = $(this).attr('href');
    var maskHeight = $(document).height();
    var maskWidth = $(window).width();
    $('#mask').fadeTo(0, 0.8);
    var winH = $(window).height();
    $currentId = $(id);

    $currentId.css('top', winH / 2 - $(id).height() / 2);

    resizeModal();
    $currentId.fadeIn(500);
    $("body").css("overflow", "hidden");
});

Answer 1

我认为这就是你要找的东西。

function resizeModal() {
    if ($currentId === false) return;
    var winW = $(window).width();
    $currentId.css('left', winW / 2 - $currentId.width() / 2);
    var winH = $(window).height();
    $currentId.css('top', winH / 2 - $currentId.height() / 2);
}

在浏览器调整大小时保持响应式绝对居中div

1 个答案: