title: How to darken background except of one element?
body: <p>How to darken entire body except of one element which is <code>div .search-bar</code>. In my case it's only darken on click and do nothing after!</p>
  <p>But my goal is to be focused on click and if it's clicked to any other area darke</p>
  <p>This is how output should look like -&gt;
  <a href="https://i.stack.imgur.com/30YEs.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/30YEs.png" alt="image" /></a></p>
  <pre><code>&lt;div class=&quot;search-bar&quot;&gt;
      &lt;input type=&quot;text&quot; class=&quot;search-btn&quot; placeholder=&quot;Поиск по ключевым словам&quot;&gt;
  &lt;/div&gt;
  </code></pre>
  <p>And -&gt;</p>
  <pre><code>$(function () {
  
      darkenColor();
  
  });
  
  var darkenColor = function ($color) {
  
      var $color = $('.search-bar');
  
      $color.click(function () {
  
  
          $(function () {
              var docHeight = $(document).height();
              $('body').append(&quot;&lt;div id='overlay'&gt;&lt;/div&gt;&quot;);
              $('#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,
              });
  
  
      });
  
  
  }
  </code></pre>