同一页面上两个 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)'
                }
            }
        }
});

我试过使用这种样式，但这会影响两者，它们都会在此处显示黑色 border.enter 代码

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

有人对如何解决这个问题有什么建议吗？

Answer 1

考虑使用 Fancybox's Callbacks 声明您的 CSS。
例如；在这里，我可以利用 beforeShow 事件将每个具有 class .fancybox1

的元素的 .fancybox-skin 更改为白色

$(".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)'

                }
        }
    }
});

根据您的要求demo，这是完整的

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

Different styles on two fancybox on same page

javascript

css

jquery

fancybox-2