Fancybox overlay not present in older IE

问题

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.

回答1:

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.

来源：https://stackoverflow.com/questions/15639902/fancybox-overlay-not-present-in-older-ie

标签

jquery

css

fancybox

fancybox-2