Question

有没有办法删除Fancybox 2上的投影？有CSS解决方案吗？我花了很多时间尝试使用CSS的各种解决方案并尝试破解JS，但似乎没有任何工作。请帮忙。这是我如何调用Fancybox。

<script type="text/javascript">
        $(document).ready(function() {
    $(".fancybox").fancybox({
        afterLoad: function(){
   this.title = $(this.element).next('.newTitle').html();
  },
        padding: 0, 
        openEffect: 'fade',
        closeEffect: 'fade',

        prevEffect: 'fade',
        nextEffect: 'fade',
        closeBtn   : false,
        arrows : false,
        helpers: {
            title   : { type : 'outside' },
            buttons: {},
            overlay: {
                css: {
                    'background': 'rgba(255, 255, 255, 1.5)'
                }
            }
        }

    });
});
    </script>

Answer 1

编辑：JFK指出我的笔记是错误版本的花式框。对于fancybox2，Drophadow正在开启

.fancybox-opened .fancybox-skin {
    -webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
       -moz-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}

重写此项以设置box-shadow：none

Answer 2

更改fancybox css中的以下内容

.fancybox-opened .fancybox-skin {
    -webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}

到

.fancybox-opened .fancybox-skin {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

或者你从fancybox css中删除它。当然，您可以将第二个片段添加到其他css文件中。

从Fancybox 2中删除阴影？

2 个答案: