Javascript 响应性灯箱在iPhone中不起作用

我们正在努力使灯箱响应

以下是原始CSS：

#mageworxLightbox{位置：绝对；左侧：0；宽度：100%；z索引：60002；文本对齐：中心；线宽：0；}
#mageworxLightbox img{宽度：自动；高度：自动；}
#mageworxLightbox a img{边框：无；}
#MageWorxOutImageContainer{位置：相对；背景颜色：#fff；宽度：250px；高度：250px；边距：0自动；}
#mageworxImageContainer{padding:10px；}

已编辑成：

#mageworxLightbox{位置：绝对；左侧：0；宽度：100%；高度：自动！重要；z索引：60002；文本对齐：居中；线条高度：0；}
#mageworxLightbox img{宽度：自动；高度：自动；}
#mageworxLightbox a img{边框：无；}
#MageWorxOutImageContainer{宽度：80%！重要；高度：自动！重要；位置：相对；最大宽度：600px；背景色：#fff；边距：0自动；}
#mageworxImageDataContainer{宽度：80%！重要；高度：自动！重要；最大宽度：600px；线宽：2em；}
#mageworxImageContainer{padding:10px；height:auto！important；}

但是关闭按钮在iPhone等设备上不再起作用了，我不明白为什么；此外，在横向模式下，图像未正确调整大小

这是我们的网页：

---

（要查看lightbox，请在下拉列表中选择“modello letto”，在其中单击的任何图像都可以使用）

将此css添加到样式表中。某些元素具有冲突层，这会导致按钮“位于”层之下，因此您不是在单击按钮，而是在某个不可见层上单击

#mageworxImageDataContainer{
...
位置：相对位置；
}

太棒了！它起作用了！还有两件事，当我试图在横向模式下打开它时，灯箱太大了，我试图在“高度：80%！重要”；中更改高度，但我看不到任何变化，而且如果我旋转手机，黑色bg覆盖层不会显示在页面的每个部分…添加

高度：90%！重要的到
#mageworxLightbox
而不是自动。。你可能弄坏了
#mageworxImageDataContainer
，我猜不应该有80%的高度。对我来说，覆盖是好的，不管怎样，这些是不同的问题。请接受答案，如果它对你有帮助，但我们不能在这里为你做整个页面的css：）。它几乎完成了，我修复了覆盖问题，我仍然有一些问题与横向模式，因为调整大小是不正确的
device.iphone = function () {
        return !device.windows() && find('iphone');
    };

if (device.ios()) {
        if (device.ipad()) {
            addClass("ios ipad tablet");
        } else if (device.iphone()) {
            addClass("ios iphone mobile");
        } else if (device.ipod()) {
            addClass("ios ipod mobile");
        }
    }