Leave body child element without opacity

Question

Leave body child element without opacity

Asked 4 years, 6 months ago

Viewed 49 times

-3

I am developing a project and I arrived in a part when the user click on his emoji that box appear with the display = 'block' and the body get opacity of 0.8 and only this box be without opacity, only when I apply the opacity on the body the clickuser child element is also superimposed by the note opacity :

body  {
    width: 100%;
    margin: 0 ;
    background-color: #E7E7E6;
    
}


.topo{
     position: fixed;
    background-color: white;
   width: 100%;
   top: 0;
   min-height: 56px;
   margin-top: -1px !important;
    padding: 3px;
    text-align: center;
    -webkit-box-shadow: 0px 1px 4px 0px rgba(148,146,148,0.85);
-moz-box-shadow: 0px 1px 4px 0px rgba(148,146,148,0.85);
box-shadow: 0px 1px 4px 0px rgba(148,146,148,0.85);

}

.logo{
float: left;
width: 100px;


   }
   
.pesquisar{
 
    margin: 0;
    margin-top: 18px;
    margin-bottom: 20px;
   
}
.pesquisar  .pesquisa {
    position: relative;
 
    border: 1px solid rgb(179, 179, 179);
    border-radius: 4px;
    height: 25px;
    width: 50%;
    transition: 0.3s;
    font-family: roboto;
    font-size: 11pt;
 }

 .pesquisar  .pesquisa:focus {
    height: 27px;
    width: 50.4%;
    outline: none;
    transition: 0.3s;
 }

 .imgButton{
 position: absolute;
 margin-left: -30px;
margin-right: 50% !important;
   top: 25px !important;
   cursor: pointer;
   background-color: rgba(0, 0, 0, 0);
   border: 0px;
   outline: none;


}

.Menu{
    position: fixed;
    width: 100%;
    margin-top: -8px;

}

.produtosEscrita{
    
    background-color: #bb080b;
   

   top: 54px;

   width: 25%;
   height: 35px;
}

#Escrita{
    margin-top: 200px;
     position: relative;
    color: white;
   font-size: 15pt;
   font-family: Josefin Sans   ;
   margin-left: 5%;
   top: 23 !important;
   top: 10px;
    
}

.menuLateral{
    background-color: #F7F7F7;
    margin-top: -16px;

   
   width: 25%;
   border-radius: 0px 0px 7px 0px;
-moz-border-radius: 0px 0px 7px 0px;
-webkit-border-radius: 0px 0px 7px 0px;
border: 0px solid #000000;
}


.topoBanner{
    border-radius: 7px 7px 0px 0px;
-moz-border-radius: 7px 7px 0px 0px;
-webkit-border-radius: 7px 7px 0px 0px;
border: 0px solid #000000;
  position: static;
     margin-top: 82px;
    background-color: #bb080b;


   top: 0px;
   margin-left: 25.7%;
   width: 73.5%;

}
.topoBanner .imagem img {
    border-radius: 7px 7px 0px 0px;
    -moz-border-radius: 7px 7px 0px 0px;
    -webkit-border-radius: 7px 7px 0px 0px;
    border: 0px solid #000000;
    width: 100%;
    height: 230px;
    
}



.temaConteudo{
    background-color: #F7F7F7;
   border: 1px solid rgb(184, 183, 183);
   margin-top: -5px;
   width: 100%;
   padding-top: 8px;
   padding-bottom: 8px;
}

.temaConteudo{

    top: 5 !important;
    font-family: Roboto;
    font-size: 13pt;

}

.conteudo{
    background-color: #F7F7F7;
    margin-left: 25.7%;
    width: 72.5%;
   padding: 8px;
   margin-top: 0.3px;
   padding-bottom: 8px;
   border: 1px solid rgb(184, 183, 183);
   height: 1000px;
}

#menu{
    padding-bottom: -20px !important;
    padding: 10px;
    padding-left: 10px;
 

    

}

#menu li {
    padding: 10px;
    border: none;
    list-style-type:none;

    
}
#menu li a {
    text-decoration: none;
    color: black;
    font-size: 13pt;
    font-family: roboto;
    padding: 5px;
    border-radius: 7px ;
    transition: 0.5s;
}
#menu li a:hover{
    font-size: 14pt;
    background-color: rgba(0, 0, 0, 0.13);
    transition: 0.5s;
}

.carrinho{
    float: left;
    margin-left: 75%;
    margin-top: -29px;
    background-color: rgba(0, 0, 0, 0);
    cursor: pointer;
    border: none;
    text-align: center;
    border-radius: 6px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 2px;
    outline: none;
}

.carrinho:hover{
    background-color: #dddddd;
    transition: 0.5s;
    
}

#user{
    float: left;
    margin-left: 80%;
    margin-top: -29px;
    background-color: rgba(0, 0, 0, 0);
    cursor: pointer;
    border: none;
    text-align: center;
    border-radius: 6px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 2px;
    outline: none;
}

#user:hover{
    background-color: #dddddd;
    transition: 0.5s;
    
}

#clickuser{
    position: fixed;
    margin-left: 78.8%;
    margin-top: -18px;
    background-color: #bb080b;
    width: 230px;
    height: 250px;
    display: none;
    transition: 1s;
    border-radius: 5px;
    opacity: 1;
}

#clickuser:after {
	content: "";

    transition: 1s;
    position: absolute;
    border-left: 10px solid transparent;
	border-right: 10px solid transparent;
    /*Faz seta "apontar para baixo. Definir o valor como 'top' fará ela "apontar para cima" */
    /*Aqui entra a cor da "aba" do balão */
    border-bottom: 20px solid #bb080b;
    top: -15px; /*localização. Experimente alterar para 'bottom'*/
    left: 57%;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css2.css" type="text/css">
    <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Anton&family=Josefin+Sans&display=swap" rel="stylesheet">
    <title>Document</title>
</head>
<body>
<header class="topo">

   
 
<img class="logo" src="logo.png" alt="" srcset="" >


<div class="pesquisar">
<form action="" method="post">
<input class="pesquisa"type="text" name="" id=""  placeholder="Digite um produto especifico">

<button class="imgButton"><img class="imgButton2" src="lupa.png" alt="" srcset="" width="19px"></button>


</form>
<button class="carrinho"><img src="carrinho.png" width="22px"alt=""></button>
<button id="user"><img src="user.png" width="22px"alt=""></button>

</div>


    </header>

<div id="clickuser">ds</div>
<section class="Menu">

<div class="produtosEscrita">
<span id="Escrita">
    PRODUTOS
</span>
    </div>

    <div class="menuLateral">
    <nav>
        <ul id="menu">

        <li><a href="logado.php" class="home">Ofertas</a></li>
        <li><a href="top10.php">Promoções do dia</a></li>
        <li><a href="logado.php">Carne</a></li>
        <li><a href="logado.php">Legumes</a></li>
        
        </ul>
      </nav>

</section>

<section class="topoBanner">

<div class="imagem">
    
         <img src="banner.png" alt="" srcset="" width="">

      </div>
      
      <div class="temaConteudo">
      <span class="escritaTema">&nbsp; > Legumes</span>
</div>

</section>

<section class="conteudo">

<div class="Conteudo">
      <span class="escritaTema">&nbsp; Legumes</span>
</div>

</section>



</body>

<script>
 var caixadeuser = document.getElementById('clickuser')
 var bonecouser = document.getElementById('user')
 bonecouser.addEventListener('click', mostrarcaixa)

 function mostrarcaixa(){


    if(caixadeuser.style.display !== 'block'){
        caixadeuser.style.display = 'block';
        document.body.style.opacity  = '0.8'
        caixadeuser.style.opacity = '1'
        }

    else{
        caixadeuser.style.display = 'none'
        caixadeuser.style.transition = '1s';
        document.body.style.opacity = '1'
    }
    

 }

</script>
</html>

Issac would not be better to place an element with opacity over the body than to place opacity on the entire body ;)

– hugocsl

2020/05/15 at 15:54
The problem that if I put an element over the body will continue the same thing because the box remains a child of the body

– Issac Willian

2020/05/15 at 16:06

1 answer

Browser other questions tagged javascript

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

by Sam • **79,597** points · Answer 1 · 2020-05-15T16:41:48+00:00

As the div that you do not want to be transparent is direct daughter of the body, you can create a class so that all direct child elements of the body are transparent, except the div in question, using :not():

body.transparente >*:not(#clickuser){
   opacity: .5;
}

By clicking the user icon, you add the class .transparente to the body:

document.body.classList.add("transparente");

And remove by clicking again:

document.body.classList.remove("transparente");

Put as well z-index: 1; in the div #clickuser so that it does not overlap with the following elements.

Behold:

I put a red background on the user icon button to illustrate, since the image is not loaded.

var caixadeuser = document.getElementById('clickuser')
 var bonecouser = document.getElementById('user')
 bonecouser.addEventListener('click', mostrarcaixa)

 function mostrarcaixa(){


    if(caixadeuser.style.display !== 'block'){
        caixadeuser.style.display = 'block';
        document.body.classList.add("transparente");
        }

    else{
        caixadeuser.style.display = 'none'
        document.body.classList.remove("transparente");
        caixadeuser.style.transition = '1s';
    }
    

 }

body  {
    width: 100%;
    margin: 0 ;
    background-color: #E7E7E6;
    
}


.topo{
     position: fixed;
    background-color: white;
   width: 100%;
   top: 0;
   min-height: 56px;
   margin-top: -1px !important;
    padding: 3px;
    text-align: center;
    -webkit-box-shadow: 0px 1px 4px 0px rgba(148,146,148,0.85);
-moz-box-shadow: 0px 1px 4px 0px rgba(148,146,148,0.85);
box-shadow: 0px 1px 4px 0px rgba(148,146,148,0.85);

}

.logo{
float: left;
width: 100px;


   }
   
.pesquisar{
 
    margin: 0;
    margin-top: 18px;
    margin-bottom: 20px;
   
}
.pesquisar  .pesquisa {
    position: relative;
 
    border: 1px solid rgb(179, 179, 179);
    border-radius: 4px;
    height: 25px;
    width: 50%;
    transition: 0.3s;
    font-family: roboto;
    font-size: 11pt;
 }

 .pesquisar  .pesquisa:focus {
    height: 27px;
    width: 50.4%;
    outline: none;
    transition: 0.3s;
 }

 .imgButton{
 position: absolute;
 margin-left: -30px;
margin-right: 50% !important;
   top: 25px !important;
   cursor: pointer;
   background-color: rgba(0, 0, 0, 0);
   border: 0px;
   outline: none;


}

.Menu{
    position: fixed;
    width: 100%;
    margin-top: -8px;

}

.produtosEscrita{
    
    background-color: #bb080b;
   

   top: 54px;

   width: 25%;
   height: 35px;
}

#Escrita{
    margin-top: 200px;
     position: relative;
    color: white;
   font-size: 15pt;
   font-family: Josefin Sans   ;
   margin-left: 5%;
   top: 23 !important;
   top: 10px;
    
}

.menuLateral{
    background-color: #F7F7F7;
    margin-top: -16px;

   
   width: 25%;
   border-radius: 0px 0px 7px 0px;
-moz-border-radius: 0px 0px 7px 0px;
-webkit-border-radius: 0px 0px 7px 0px;
border: 0px solid #000000;
}


.topoBanner{
    border-radius: 7px 7px 0px 0px;
-moz-border-radius: 7px 7px 0px 0px;
-webkit-border-radius: 7px 7px 0px 0px;
border: 0px solid #000000;
  position: static;
     margin-top: 82px;
    background-color: #bb080b;


   top: 0px;
   margin-left: 25.7%;
   width: 73.5%;

}
.topoBanner .imagem img {
    border-radius: 7px 7px 0px 0px;
    -moz-border-radius: 7px 7px 0px 0px;
    -webkit-border-radius: 7px 7px 0px 0px;
    border: 0px solid #000000;
    width: 100%;
    height: 230px;
    
}



.temaConteudo{
    background-color: #F7F7F7;
   border: 1px solid rgb(184, 183, 183);
   margin-top: -5px;
   width: 100%;
   padding-top: 8px;
   padding-bottom: 8px;
}

.temaConteudo{

    top: 5 !important;
    font-family: Roboto;
    font-size: 13pt;

}

.conteudo{
    background-color: #F7F7F7;
    margin-left: 25.7%;
    width: 72.5%;
   padding: 8px;
   margin-top: 0.3px;
   padding-bottom: 8px;
   border: 1px solid rgb(184, 183, 183);
   height: 1000px;
}

#menu{
    padding-bottom: -20px !important;
    padding: 10px;
    padding-left: 10px;
 

    

}

#menu li {
    padding: 10px;
    border: none;
    list-style-type:none;

    
}
#menu li a {
    text-decoration: none;
    color: black;
    font-size: 13pt;
    font-family: roboto;
    padding: 5px;
    border-radius: 7px ;
    transition: 0.5s;
}
#menu li a:hover{
    font-size: 14pt;
    background-color: rgba(0, 0, 0, 0.13);
    transition: 0.5s;
}

.carrinho{
    float: left;
    margin-left: 75%;
    margin-top: -29px;
    background-color: rgba(0, 0, 0, 0);
    cursor: pointer;
    border: none;
    text-align: center;
    border-radius: 6px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 2px;
    outline: none;
}

.carrinho:hover{
    background-color: #dddddd;
    transition: 0.5s;
    
}

#user{
    float: left;
    margin-left: 80%;
    margin-top: -29px;
    background-color: rgba(0, 0, 0, 0);
    cursor: pointer;
    border: none;
    text-align: center;
    border-radius: 6px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 2px;
    outline: none;
    background: red;
}

#user:hover{
    background-color: #dddddd;
    transition: 0.5s;
    
}

#clickuser{
    position: fixed;
    margin-left: 78.8%;
    margin-top: -18px;
    background-color: #bb080b;
    width: 230px;
    height: 250px;
    display: none;
    transition: 1s;
    border-radius: 5px;
    opacity: 1;
    z-index: 1;
}

#clickuser:after {
	content: "";

    transition: 1s;
    position: absolute;
    border-left: 10px solid transparent;
	border-right: 10px solid transparent;
    /*Faz seta "apontar para baixo. Definir o valor como 'top' fará ela "apontar para cima" */
    /*Aqui entra a cor da "aba" do balão */
    border-bottom: 20px solid #bb080b;
    top: -15px; /*localização. Experimente alterar para 'bottom'*/
    left: 57%;
}

body.transparente >*:not(#clickuser){
   opacity: .5;
}

<header class="topo">

   
 
<img class="logo" src="logo.png" alt="" srcset="" >


<div class="pesquisar">
<form action="" method="post">
<input class="pesquisa"type="text" name="" id=""  placeholder="Digite um produto especifico">

<button class="imgButton"><img class="imgButton2" src="lupa.png" alt="" srcset="" width="19px"></button>


</form>
<button class="carrinho"><img src="carrinho.png" width="22px"alt=""></button>
<button id="user"><img src="user.png" width="22px"alt=""></button>

</div>


    </header>

<div id="clickuser">ds</div>
<section class="Menu">

<div class="produtosEscrita">
<span id="Escrita">
    PRODUTOS
</span>
    </div>

    <div class="menuLateral">
    <nav>
        <ul id="menu">

        <li><a href="logado.php" class="home">Ofertas</a></li>
        <li><a href="top10.php">Promoções do dia</a></li>
        <li><a href="logado.php">Carne</a></li>
        <li><a href="logado.php">Legumes</a></li>
        
        </ul>
      </nav>

</section>

<section class="topoBanner">

<div class="imagem">
    
         <img src="banner.png" alt="" srcset="" width="">

      </div>
      
      <div class="temaConteudo">
      <span class="escritaTema">&nbsp; > Legumes</span>
</div>

</section>

<section class="conteudo">

<div class="Conteudo">
      <span class="escritaTema">&nbsp; Legumes</span>
</div>

</section>