Question

我在移动浏览器上显示弹出图片时出现小问题。单击鼠标时会显示弹出窗口，然后调整大小函数会根据视口大小设置大小。

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

我使用的调整大小功能如下：

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

jQuery popup在手机上调整大小

1 个答案: