fancybox 叠加层 api

Question

我是第一次尝试设置 fancyBox，但在使用覆盖功能时遇到了困难。我想用我的颜色自定义它，但 api 没有多大帮助，因为它只是显示了 link 目标的解决方案。

我的标记如下所示

<span class="js--fb-bla-trigger">click here</span>
<div class="js--fb-bla">content of fancybox</div>

我的脚本是这样的

$(".fancybox").fancybox({
    helpers : {
        overlay : {
            css : {
                'background-color' : '#f00'
            }
        }
    }
});

$(document).on('click', '.js--fb-bla-trigger', function(){
    $.fancybox($('.js--fb-bla'));
});

我已经知道我必须将 options/handler 放在我的目标元素上，但是怎么做？！我尝试了 3 种不同的方法，都没有用。

Answer 1

像这样的东西应该会有所帮助

$('.js--fb-bla-trigger').on('click', function () {
    $.fancybox({
        content: $('.js--fb-bla'),
        helpers: {
            overlay: {
                css: {
                    'background': '#f00'
                }
            }
        }
    });
});

这里是demo

Answer 2

只需在选择器后添加 API 选项，例如：

$(document).on('click', ".js--fb-bla-trigger", function () {
    $.fancybox($('.js--fb-bla'), { // notice the comma before the opening bracket
        // API options here
        helpers: {
            overlay: {
                css: {
                    'background-color': '#f00'
                }
            }
        } // helpers
    }); // fancybox
}); // on click

见JSFIDDLE

fancybox 叠加层 api

fancybox overlay via api

jquery

fancybox