Question

我在网站上使用了fancybox this test page，所有Mac浏览器，iOS和PC上的非IE浏览器都可以。 Windows 8上的最新IE也没问题。但是在XP上的IE8,7和6不会在页面上显示透明覆盖或弹出框阴影，并且弹出窗口下的页面上的链接仍然是可点击的（我不想要）。（注意，测试页面上的弹出图像不一定是正确的最终图像 - 没关系。）

可能我把js搞砸了（除了能够改变非常基本的配置，我在js中没有专业知识）。我注意到fancybox演示页面在较旧的IE中运行良好。

我不喜欢旧IE中的盒子阴影，但我需要叠加的模态行为。

任何指向我出错的地方都会感激不尽。

Answer 1

嗯，这是典型的情况，修改原始fancybox文件不是一个好主意（除非你知道你在做什么。）最好创建自己的自定义脚本来修改默认设置。

在“修改过的”fancybox js文件中，您在第1707行添加了此内容：

css : {
  'background' : 'rgba(200,200,200,0.35)'  // changing here does change overlay colour
},    // custom CSS properties

该更改会抑制要渲染的fancybox的叠加图像，如fancybox css文件的第151行所示：

.fancybox-overlay {
    background: url("fancybox_overlay.png") repeat scroll 0 0 transparent;
    /* other properties here */
}

IE8及更低版本不支持RGBa，因此不存在叠加层。不过，建议使用 HERE 建议的后备声明来避免此类问题。

下次尝试使用您自己的自定义脚本覆盖默认设置，并保留原始文件。

编辑：

如果您想设置自己的png overlay 图片背景（具有自己的颜色和不透明度），那么只需添加到您的自定义脚本：

helpers: {
    overlay: {
        css: {
            'background-image': 'url("path/my_own_overlay.png")'
        }
    }
}

并单独保留原始fancybox_overlay.png文件。

Fancybox覆盖不存在于较旧的IE中

1 个答案: