Question

在fancyBox网站上的每一个代码示例中，阴影框都会锁定背景内容并默认情况下将其灰显。我试过不插入任何代码，并尝试输入代码手动执行，无论我做什么，它都不会锁定内容或更改背景内容的不透明度。这是我的代码和测试页面。测试页：http://docuvital.com/docuvital/includes/themes/merced/templates/guitester.cfm

<!-- Add jQuery library -->
<script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script>

<!-- Add mousewheel plugin (this is optional) -->
<script type="text/javascript"src="#APP_ROOT#/includes/themes/merced/templates/shadowbox/lib/jquery.mousewheel-3.0.6.pack.js"></script>

<!-- Add fancyBox -->
<link rel="stylesheet" href="#APP_ROOT#/includes/themes/merced/templates/shadowbox/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
<script type="text/javascript" src="#APP_ROOT#/includes/themes/merced/templates/shadowbox/source/jquery.fancybox.pack.js?v=2.1.5"></script>

<!-- Optionally add helpers - button, thumbnail and/or media -->
<link rel="stylesheet" href="#APP_ROOT#/includes/themes/merced/templates/shadowbox/source/helpers/jquery.fancybox-buttons.css?v=1.0.5" type="text/css" media="screen" />
<script type="text/javascript" src="#APP_ROOT#/includes/themes/merced/templates/shadowbox/source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
<script type="text/javascript" src="#APP_ROOT#/includes/themes/merced/templates/shadowbox/source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>

<link rel="stylesheet" href="#APP_ROOT#/includes/themes/merced/templates/shadowbox/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" type="text/css" media="screen" />
<script type="text/javascript" src="#APP_ROOT#/includes/themes/merced/templates/shadowbox/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $(".fancybox").fancybox();
    });
</script>

</head>
</cfoutput>
<body>
this is some test stuff
<script>
$.fancybox.open([
{
  helpers : {

    overlay : {
    locked  : true,
        css : {
            'background' : 'rgba(58, 42, 45, 0.95)'
        }
    }
},
content : 'test',
title: "test page"
}    
]);
</script>

Answer 1

您正在尝试在初始化之前打开Fancybox。您需要将$.fancybox.open放在$(document).ready(之内，或者至少等到文档加载完毕。

$(document).ready(function () {
    $(".fancybox").fancybox();

    $.fancybox.open([{
        helpers: {

            overlay: {
                locked: true,
                css: {
                    'background': 'rgba(58, 42, 45, 0.95)'
                }
            }
        },
        content: 'test',
        title: "test page"
    }]);
});

锁定和不透明度不适用于fancyBox JQuery

1 个答案: