同一页面上的两个fancybox上的样式不同

Question

我在同一页面上有两个不同的fancybox开瓶器。 我想在.fancybox2上有一个黑色边框，在.fancybox1上有一个普通的白色边框。 也有一些其他小的差异。 这是脚本。

$(".fancybox").fancybox1({
            padding:10,
            helpers: {
            title: {
                type: 'inside'
            },
            overlay: {
                css : {
                    'background': 'rgba(0,0,0,0.6)'
                }
            }
        }
});

 //Fancy box number 2 not working with different style

$(".fancybox2").fancybox({
        padding:10,
        openEffect: 'elastic',
        closeEffect: 'elastic',
        helpers: {
            title: {
                type: 'inside'
            },
            overlay: {
                locked: false,
                css : {
                    'background': 'rgba(255,255,255, 0.6)'
                }
            }
        }
});

我尝试使用这种样式，但这会影响两者，它们都会有黑色边框。在此处输入代码

<style type="text/css">.fancybox-skin {background-color: #000 !important;}</style>

有人对如何解决这个问题有一些建议吗？

Answer 1

考虑使用Fancybox的Callbacks声明CSS。
例如; 在这里，我可以利用的beforeShow事件改变.fancybox-skin变白使用类的每一个元素.fancybox1

$(".fancybox1").fancybox({
 beforeShow: function(){
  // here set the border color for each class
  $(".fancybox-skin").css("backgroundColor","white");

 },
   helpers : {
        overlay : {
           css : {
                   'background': 'rgba(0,0,0,0.6)'

                }
        }
    }
});

这是根据您的要求的完整演示