如何居中并专注于模态图像

时间:2018-02-17 04:28:03

标签: javascript html css mobile modal-dialog

我在移动设备上观看时使用模态显示大型res图像。这样,用户可以选择是否加载较大的文件以及更详细地检查图像。

您可以在移动https://glewindesign.com/project_1.html

上看到有问题的网页

第一个问题是我的图像比模态容器以及视口大。我想用滚动条这样做,这样用户就可以用手指移动并检查全尺寸图像,无需捏合/缩放。

因为图像较大,但我无法将其居中。无论我尝试什么CSS中心技巧,它总是加载在图像的左上角。

第二个问题是焦点没有被恰当地困在模态中。

当我滚动浏览高分辨率图像时,有时用户会与模态后面的区域进行交互时出现故障?当我快速向下滚动时,我会注意到它。有时会出现固定的页脚菜单。

我使用了本教程

https://css-tricks.com/considerations-styling-modal/

并且正在利用我认为会阻止与模态背后元素交互的叠加层,但就像我说的那样我仍然会遇到固定页脚有时出现的问题。

对此有任何建议将不胜感激!

4 个答案:

答案 0 :(得分:0)

EntityFrameworkDataProvider课程中,您可以设置.mobile-hires。您也可以使用width: 100%

答案 1 :(得分:0)

保存模态内容的容器需要将overflow属性设置为滚动。它还需要具有max-width属性,其值小于图像分辨率。然后,图像将滚动。

答案 2 :(得分:0)

位置:固定   最高:50%   左:50%   transform:translate(-50%, - 50%);添加到.mobile-hires

答案 3 :(得分:0)

所以我想要实现的目标实际上不可能使用CSS。您可以使小于包含块的图像居中,但是您不能将图像放在比其包含块大的图像中心,因为它只是位于块的左上角。我需要实现一些javascript来定位滚动条,使图像出现在中心。