Darken screen by clicking on the search bar

Asked

Viewed 1,215 times

4

On the Americas and Submarine websites, it has an effect that by clicking on the search bar, the entire site is slightly darkened to highlight the search bar. That one I don’t know the name of the effect. But it would be possible to do something similar?

jquery css

2 answers

7


There are several ways to get the result, I give you one:

// 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>
<div class="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>

  • Is that max-width nor was supposed to be there rsrs. I saw there and altered here, very interesting.

  • rsr.. is much simpler and cleaner, I think.

4

Another way using only CSS is by putting the .overlay right after the search field and activating by the pseudo-class :focus:

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>

Browser other questions tagged jquery css

You are not signed in. Login or sign up in order to post.