同一頁面上的兩個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)'

                }
        }
    }
});

這是根據您的要求的完整演示