折叠时的黑色覆盖

Question

当 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>

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

我只希望 搜索 div 可见，其余部分使用不透明度为 0.5 的深色叠加层。

知道如何实现吗？

Answer 1

您正在将叠加层 class 应用到 body，这意味着您将所有 .overlay css 应用到您的 body，即。你的整个页面。 .overlay 应该是一个单独的元素，因此添加一个带有 class 名称覆盖层的 div，而不是 addClass/removeClass 而是 show/hide .overlay。此外，.overlay 的 z-index 应该高于页面的其余部分，搜索栏的 z-index 应该更高。

折叠时的黑色覆盖

Black overlay on collapse

html

css

overlay

twitter-bootstrap