javascript - 覆盖不工作 fancybox v2

Question

我想在下面的代码中更改花式框的叠加层和不透明度。我尝试根据 JFK 的建议添加这些行，但不幸的是它不起作用:

   <script type="text/javascript">
$(".fancybox").fancybox({
    helpers : {
        overlay : {
            css : {
                'background' : 'rgba(58, 42, 45, 0.3)'
            }
        }
    }
});

</script>

就在开始脚本标签之后但没有成功。有什么想法吗？谢谢

现在我的完整代码:

    <script type="text/javascript">
$(".fancybox").fancybox({
    helpers : {
        overlay : {
            css : {
                'background' : 'rgba(58, 42, 45, 0.3)'
            }
        }
    }
});

function openFancybox() {
    setTimeout( function() {$('#various1').trigger('click'); },2000);

}
$(document).ready(function() {
    var visited = $.cookie('visited');
    if (visited == 'yes') {
        return false;
    } else {
        openFancybox();
    }
    $.cookie('visited', 'yes', { expires: 1 });
    $('#various1').fancybox();

});
</script>

在正文标签内:

<div id="various1" style="display:none;">
<h2>Welcome to our website!</h2>
</div>

Answer 1

Fancybox v2.x 选项是新的并且与以前的版本不兼容...例如 overlayOpacity 和 overlayColor 是 fancybox v1.3.4 的选项并且不会工作与版本 2。

检查 fancybox v2.x documentation您应该使用正确的选项。

要在 fancybox 2 中更改颜色和不透明度，您应该使用这种格式(今天是 v2.1.4):

$("#various1").fancybox({
    helpers : {
        overlay : {
            css : {
                'background' : 'rgba(58, 42, 45, 0.3)'
            }
        }
    }
});

...其中 4 个数字中的最后一个是所选的不透明度(编辑:上面的代码与 OP 的选择器相匹配)

检查 JSFIDDLE

重要:IE[6/7/8] 不支持rgba ....检查this article以供进一步引用。