为什么'fancybox-overlay'div没有'display：block'作为内联样式？

Question

<a href="img/blog-img-01.jpg" class="single_image">
   <div class="blog-img-wrap">
     <img src="img/blog-img-01.jpg" alt="">
   </div>
</a>

fancybox css，js文件来自cdn。

Answer 1

使用fancybox（版本1或2）和任何其他弹出窗口，例如Bootstrap Modal，jQuery对话框Modal，其中隐藏元素可以使用jQuery，JS或Pure CSS显示，主要隐藏选择器始终具有属性display: none to隐藏它们;在这种情况下fancybox是

.fancybox-overlay {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    display: none; <---Here
    z-index: 8010;
    background: url(background.png);
}

并显示隐藏的元素，默认 jQuery，JS 覆盖隐藏的选择器属性display:none;到display:block;可见

在这种情况下（Fancybox v2）您可以使用自定义脚本覆盖jQuery display:block;到display:inline;

的默认行为

<script type="text/javascript">
    $(document).ready(function() {
        $(".fancybox").fancybox({
            helpers : {
                overlay : {
                    css : {
                        'display' : 'inline',
                    }
                }
            }
        });
    });
</script>

Fiddle

回答你的问题

为什么'fancybox-overlay'div没有'display：block'作为内联样式？

因为它与fancybox无关，所以jQuery默认行为是通过覆盖属性display:none来显示隐藏元素display:block