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

在同一页上，我有两个不同的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>

.fancybox皮肤{背景色：#000！重要；}

---

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

考虑使用声明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)'

                }
        }
    }
});

---

这是一个完全符合您要求的示例

您可以发布一个像小提琴一样的实例吗？非常好@raja.khoury，这个回调函数解决了我的问题。谢谢@西班牙人。不客气。很乐意帮忙