Question

我正在尝试第一次设置fancyBox并且正在使用覆盖功能。我想用我的颜色自定义它，但api没有多大用处，因为它只显示链接目标的解决方案。

我的标记看起来像这样

<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'));
});

我已经知道我必须将选项/处理程序放在我的目标元素上但是如何？！我尝试了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覆盖

2 个答案: