Darken screen by clicking the search bar

// Quando o campo receber focus.
$('.busca').on('focus', function() {
  // Altera a propriedade z-index
  $(this).css({ 'z-index': 99 });
  // Exibe a overlay
  $('.overlay').fadeIn(1000);
});
// Quando o campo perde o focus.
$('.busca').on('blur', function() {
  // Oculta a overlay
  $('.overlay').fadeOut(1000);
  // Reseta a propriedade z-index
  $(this).css({ 'z-index': 1 });
});

* {
  box-sizing: border-box;
}
html, body {
  margin: 0;
  padding: 0;
}
.container {
  margin: 0 auto;
  width: 90%;
}
/* CAMPO DE BUSCA */
.busca {
  border: 2px solid #ccc;
  font-size: 18px;
  margin: 0 auto;
  margin-top: 70px;
  padding: 8px;
  position: relative;
  width: 100%;
  z-index: 1;
}
/* SOBREPOSIÇÃO */
.overlay {
  display: none;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  position: fixed;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 99;
}

<script src="https://code.jquery.com/jquery-2.2.4.js"></script><divclass="overlay"></div>
<div class="container">
  <input type="text" placeholder="Pesquisar" class="busca" />
  <h2>O que é Lorem Ipsum?</h2>
  Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos, e vem sendo utilizado desde o século XVI, quando um impressor desconhecido pegou uma bandeja de tipos e os embaralhou para fazer um livro de modelos de tipos. Lorem Ipsum sobreviveu não só a cinco séculos, como também ao salto para a editoração eletrônica, permanecendo essencialmente inalterado. Se popularizou na década de 60, quando a Letraset lançou decalques contendo passagens de Lorem Ipsum, e mais recentemente quando passou a ser integrado a softwares de editoração eletrônica como Aldus PageMaker.
</div>

input{
   width: 90%;
   font-size: 1.2em;
   padding: 5px;
   border: 2px solid #ddd;
   z-index: 9999;
   position: relative;
}

input:focus + .overlay{
   background-color: rgba(0, 0, 0, .3);
   z-index: 999;
}

.overlay{
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   position: fixed;
   z-index: -1;
   transition: all .5s;
}

<div>
   <input type="text" placeholder="O que você deseja Buscar?" />
   <div class="overlay"></div>
</div>
<p>
   Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam ullamcorper neque venenatis eros suscipit, vitae pretium turpis elementum. Morbi suscipit eleifend ante, ut maximus est consequat vitae. Nullam nulla nisi, tincidunt sit amet justo in, lobortis mattis leo. Quisque ornare, velit et congue vehicula, tellus augue varius purus, vel luctus ipsum leo a lectus. Ut interdum eget magna at ultrices. Phasellus laoreet dolor in tellus bibendum, nec tristique turpis porta. Nam bibendum hendrerit facilisis. Maecenas eros elit, rutrum sit amet nisl ac, egestas luctus ex. Pellentesque turpis enim, commodo eget cursus vel, lacinia vitae nunc. Praesent hendrerit nisl at nibh euismod molestie. Pellentesque luctus odio ipsum, sit amet blandit felis consectetur vitae.
</p>