jquery - 除了一个元素之外，如何使背景变暗？

Question

如何使除 div .search-bar 元素之外的整个主体变暗。在我的例子中，它只会在点击时变暗，之后什么都不做!

但我的目标是专注于点击，如果它被点击到任何其他黑暗区域

输出应该是这样的->

<div class="search-bar">
    <input type="text" class="search-btn" placeholder="Поиск по ключевым словам">
</div>

和 ->

$(function () {

    darkenColor();

});

var darkenColor = function ($color) {

    var $color = $('.search-bar');

    $color.click(function () {


        $(function () {
            var docHeight = $(document).height();
            $('body').append("<div id='overlay'></div>");
            $('#overlay')
                .height(docHeight)
                .css({
                    'opacity': 0.4,
                    'position': 'absolute',
                    'top': 0,
                    'left': 0,
                    'background-color': 'black',
                    'width': '100%',
                    'z-index': 5000
                });
            });
            $(this).css({
                'background' : '#fff',
                'position' : 'relative',
                'z-index' : 5700,
            });


    });


}

Answer 1

非 jQuery 答案:

将此 CSS 应用于您的元素

box-shadow: 0 0 0 max(100vh, 100vw) rgba(0, 0, 0, .3);