如何使除一个元素之外的背景变暗？

Question

如何使除一种元素之外的整个身体变暗div .search-bar。就我而言，它仅在单击时变暗，之后不执行任何操作！

\n

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

\n

输出应该是这样的 ->\n

\n

<div class="search-bar">\n    <input type="text" class="search-btn" placeholder="\xd0\x9f\xd0\xbe\xd0\xb8\xd1\x81\xd0\xba \xd0\xbf\xd0\xbe \xd0\xba\xd0\xbb\xd1\x8e\xd1\x87\xd0\xb5\xd0\xb2\xd1\x8b\xd0\xbc \xd1\x81\xd0\xbb\xd0\xbe\xd0\xb2\xd0\xb0\xd0\xbc">\n</div>\n

\n

并且->

\n

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

\n

Answer 1

非 jQuery 答案：

将此 CSS 应用于您的元素

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

Answer 2

当焦点具有焦点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>