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>

在body标签内：

<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个数字中的最后一个是选定的opacity（编辑：上面的代码与OP的选择器匹配）

检查 JSFIDDLE

重要：IE [6/7/8]不支持rgba ....请查看this article以获取进一步的参考。

Answer 2

只需将代码放入

即可

$(function(){
//your code here
})

Answer 3

尝试

#fancybox-overlay {
  width: 100%;
}

覆盖不工作fancybox v2

3 个答案: