Fancybox overlay不存在于旧的IE中 [英] Fancybox overlay not present in older IE

问题描述

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

可能我搞错了js能够改变非常基本的配置我在js的零专业知识）。我注意到，fancybox演示页在旧的IE中工作正常。

我不担心老IE的盒子阴影，但我需要覆盖的模态行为

解决方案

任何指向我错误地址的指针都会被感谢。 div>

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

在您的修改fancybox js文件中，您已在行1707中添加此文件：

  css：{
'background'：'rgba（200,200,200,0.35）'//改变这里改变重叠颜色
}，//自定义CSS属性
  

这种更改抑制了fancybox的overlay图片的渲染，如fancybox css文件的第151行所示：

  .fancybox-overlay {
 background：url（fancybox_overlay.png）repeat scroll 0 0 transparent; 
 / *此处的其他资源* / 
} 
  

不支持 RGBa ，因此没有叠加。这是一个好主意，但设置一个后备声明建议 这里 以避免此类问题。

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

编辑：

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

  helpers：{
 overlay：{
 css：{
'background-image'：'url（path / my_own_overlay.png）'
} 
} 
} 
  

并保留原来的 fancybox_overlay.png 文件。

I've made this test page for use of fancybox in a site and it's OK on all Mac browsers, iOS and non-IE browsers on PC. Latest IE on Windows 8 is also fine. BUT IE8, 7 and 6 on XP do not display the transparent overlay or the popup box shadow on the page, and the links on the page under the popup are still clickable (which I don't want). (Note, the popup images on the test page aren't necessarily the correct final ones - that's OK).

Probably I've messed up the js somewhere (aside from being able to change very basic configurations I have zero expertise in js). I notice that the fancybox demo page works fine in older IEs.

I'm not fussed about the box shadow in older IE but I need the modal behaviour of the overlay to be present.

Any pointers to where I gone wrong will be gratefully received.

解决方案

Well, this is the typical case where modifying the original fancybox files is not a good idea (unless you know what you are doing.) It's always better to create your own custom script to modify the default settings.

In your "modified" fancybox js file, you added this in line 1707 :

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

That change suppresses the fancybox's overlay image to be rendered, as set in line 151 of the fancybox css file :

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

IE8 and lower versions don't support the RGBa so no overlay present. It would be a good idea though, to set a fallback declaration as suggested HERE to avoid this kind of issues.

And next time, try to override the default settings using your own custom script and leave the original files alone.

EDIT :

If you want to set your own png overlay image background (with its own color and opacity) then just add to your custom script :

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

and leave alone the original fancybox_overlay.png file.

这篇关于Fancybox overlay不存在于旧的IE中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！