javascript - jQuery 弹出窗口在手机上调整大小

Question

我在移动浏览器上显示弹出图像时遇到了一个小问题。单击鼠标会显示弹出窗口，然后调整大小功能会根据视口(viewport)大小设置大小。

这工作正常，打开时位于视口(viewport)中心，但是当我将手机倾斜到横向时，我调用了调整大小功能，但它似乎无法正常工作，因为新调整大小的图像在视口(viewport)中偏离中心，这然后当手机返回纵向模式时重复。我已经在 android chrome 浏览器上测试了代码。

我用过的resize函数如下:

$(window).resize(function () {
    $(".dialogContent").css({
        position: 'absolute',
        left: ($(window).width() - $(".dialogContent").outerWidth()) / 2,
        top: ($(window).height() - $(".dialogContent").outerHeight()) / 2
    });
});

Answer 1

很抱歉发布为答案，但我仍然无法发表评论。

根据您所说的，我对您代码中的鼠标点击部分感到有些困惑。当然，当用户第一次单击按钮时，不会调用调整大小功能。那么您确定它完全按照您想要的方式工作吗？

在对你的代码的了解有限的情况下回答你的问题

应该是这样的:

 $(".dialogContent").css({
    position: 'absolute',
    left: '50%',
    'margin-left': $(".dialogContent").outerWidth() / 2,
    'margin-top': $(".dialogContent").outerHeight() / 2,
    top: '50%'
});

根据我对居中对齐定位绝对元素的理解，您将它的顶部和左侧设置为 50%，然后将定位的绝对元素偏移一半。

现在我回家了，我可以给你一个fiddle here