javascript 覆盖不工作fancybox v2

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/17004054/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-27 06:44:16  来源:igfitidea点击:

Overlay not working fancybox v2

javascriptjqueryfancyboxfancybox-2

提问by Greg

I'd like to change the overlay and opacity of a fancy box in the code below. I tried to add these lines based on JFK's suggestions but unfortunately it is not working:

我想在下面的代码中更改一个漂亮框的覆盖和不透明度。我试图根据肯尼迪的建议添加这些行,但不幸的是它不起作用:

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

</script>

just after the opening script tag but without success. Any thoughts? Thanks

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

My full code now:

我现在的完整代码:

    <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>

Within body tags:

在身体标签内:

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

回答by JFK

Fancybox v2.x options are new and not compatible with previous versions ... for instance overlayOpacityand overlayColorare options for fancybox v1.3.4 and won't work with version 2.

Fancybox v2.x 选项是新的,与以前的版本不兼容……例如overlayOpacityoverlayColor是fancybox v1.3.4 的选项,不适用于版本 2。

Check fancybox v2.x documentationfor the right options you should be using.

检查fancybox v2.x 文档以了解您应该使用的正确选项。

To change color and opacity in fancybox 2, you should use this format (v2.1.4 as today) :

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

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

...where the last of the 4 numbers is the selected opacity(EDIT: the code above matches the OP's selector)

...其中 4 个数字中的最后一个被选中opacity编辑:上面的代码与 OP 的选择器匹配)

Check JSFIDDLE

检查JSFIDDLE

IMPORTANT: IE[6/7/8] doesn't support rgba.... check this articlefor further reference.

重要提示:IE[6/7/8] 不支持rgba.... 查看这篇文章以获取进一步参考。

回答by Rahul Sawant

Just put your code in

把你的代码放进去

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

回答by comonitos

Try

尝试

#fancybox-overlay {
  width: 100%;
}