jquery - 如何使除一个元素以外的背景变暗？

如何使除div .search-bar以外的整个元素变暗。就我而言，它只会在点击后变暗，之后什么也不做！

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

这就是输出的样子-> enter image description here

<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,
            });


    });


}

最佳答案

当body具有焦点时，可以使用.focus()将类添加到input。

并在使用.focusout()失去焦点时删除该类。

简单的例子...

$('#js-search').focus(function() {
  $('body').addClass('is-dimmed');
})

$('#js-search').focusout(function() {
  $('body').removeClass('is-dimmed');
})

body {
  background: url(https://unsplash.it/1000)
}

.search {
  background: white;
  height: 100px;
  display: flex;
}

.search input {
  width: 100%;
  font-size: 3em;
  z-index: 1;
}

.is-dimmed:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .5);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="search">
  <input type="search" id="js-search">
</div>

关于jquery - 如何使除一个元素以外的背景变暗？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/48184793/