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

Consider declaring your CSS using the Fancybox's Callbacks.
For example; Here I can make use of the beforeShow event to change .fancybox-skin to white for every element with class .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)'

                }
        }
    }
});

Here is a full demo as per your requirements

同一页面上两个fancybox上的不同风格

1 个答案: