时间戳

首页 > 解决方案 > 折叠时出现黑色覆盖

html - 折叠时出现黑色覆盖

问题描述

当 div 折叠时，我试图在页面的其余部分上获得黑色覆盖。这是我的代码

<script>
    $(document).ready(function(){
        $('#filter').on('show.bs.collapse hide.bs.collapse', function (e) {
            if (e.type == 'show') {
                $('body').addClass('overlay');
            } else {
                $('body').removeClass('overlay');
            }
        })
    })
</script>

<div href="#filter" data-toggle="collapse" data-target="#filter">
    Filter your results
</div>
<div class="search collapse show" id="filter" aria-expanded="true">
    <!-- Some code -->
</div>
<!-- Rest of page -->

<style>
    .overlay{
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        width: 100vw;
        background: black;
        opacity: 0.5;
        display: block;
        z-index: 2;
}
</style>

这段代码的问题是我的身体背景变暗，不透明度为 1，页面的其余部分也变暗，不透明度为 0.5。

我只希望搜索 div是明显的，其余的带有 0.5 不透明度的深色叠加层。

关于如何实现这一目标的任何想法？

标签： htmlcsstwitter-bootstrapoverlay

解决方案

您正在将覆盖类应用于身体，这意味着您正在将所有.overlaycss 应用于您的身体，即。你的整个页面。.overlay应该是一个单独的元素，所以添加一个带有类名覆盖的 div，而不是 addClass/removeClass 你显示/隐藏.overlay. 此外 的z-index应该.overlay高于页面的其余部分，z-index搜索栏的 应该更高。

推荐阅读