覆盖不起作用fancybox v2答案

【问题标题】：Overlay not working fancybox v2覆盖不起作用fancybox v2
【发布时间】：2013-06-08 21:31:55
【问题描述】：

我想在下面的代码中更改花哨框的叠加层和不透明度。我尝试根据 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>

【问题讨论】：

看这里：stackoverflow.com/questions/9740443/…
您实际使用什么选择器来触发fancybox：.fancybox 或various1？因为无论它是什么，您都必须将您的选项应用于将fancybox 绑定到该选择器的脚本。顺便说一句，fancybox v2.x API 选项是新的，与以前的版本不兼容……overlayOpacity 是 v1.3.4 的一个选项。检查文档以了解您应该使用的正确选项fancyapps.com/fancybox/#docs
@Edward ：不幸的是，该帖子已过时且对 v2.0.x 有效，但对 v2.1.x 无效....请参阅我对新支持格式的回答。

标签： javascript jquery fancybox fancybox-2

【解决方案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（EDIT：上面的代码与 OP 的选择器匹配）

检查JSFIDDLE

重要提示：IE[6/7/8] 不支持rgba .... 请查看this article 以获取更多参考。

【讨论】：

感谢肯尼迪。我已经根据您的回答更新了我的问题的代码，但不幸的是它现在正在工作。代码是否放置在错误的位置？（我仍然难以确定 js 的用途）谢谢
@Greg ：是的，这是错误的地方......它应该作为$('#various1').fancybox(); 的一个选项。如果你没有任何链接 <a> 和 class="fancybox" 那么你根本不需要这个 $(".fancybox").fancybox() 脚本
@Greg ：查看我编辑的答案。请记住，ID 应该是唯一的，因此在同一个文档中只有一个元素可以具有该 ID。如果要将代码应用于多个元素，请改用类。
实际上我认为我说得太快了……在我的情况下似乎不起作用。你能看看goo.gl/rMIYJ吗？（这是基于您的最新代码）？我想要实现的是将某种不透明度/背景覆盖应用于整个页面（fancybox 除外）非常感谢
@Greg ：你有两个 $("#various1").fancybox() 脚本；第一个具有helpers 选项（如我的代码中所示），但第二个（没有它）会覆盖第一个。您需要将helpers 选项添加到第二个（紧跟在$.cookie() 脚本之后的那个）并删除顶部的第一个。

【解决方案2】：

把你的代码放进去

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

【讨论】：

【解决方案3】：

试试

#fancybox-overlay {
  width: 100%;
}

【讨论】：