Which Correct Way to Apply Lightbox to Each Descriptive Link and Clear

Question

I’m on a little something. I need your help for a change.

I’m practicing on a personal project, the effect Light Box and if possible would like to hear the dear(a)s colleague. Whether pointing out errors or changes for didactic purposes, constructive criticism will always be welcome!

Code

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid #e7e7e7;
    background-color: #f3f3f3;
}

li {
    float: left;
}

li a {
    display: block;
    color: #666;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover:not(.ativo) {
    background-color: #ddd;
}

li a.ativo {
    color: white;
    background-color: #4CAF50;
}

.escurecer{
    display: none;
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background: black;
    z-index:1001;
    opacity:.80;
}

#sobre {
    display: none;
    position: absolute;
    top: 30%;
    left: 37%;
    width: 25%;
    height: 37%;
    padding: 16px;
    border: 3px solid gray;
    background-color: white;
    z-index:1002;
    overflow: auto;
    text-align: center;
}

#contato {
    display: none;
    position: absolute;
    top: 30%;
    left: 37%;
    width: 25%;
    height: 37%;
    padding: 16px;
    border: 3px solid gray;
    background-color: white;
    z-index:1002;
    overflow: auto;
	  text-align: center;
}

<ul class="topnav">
  <li><a class="ativo" href="#inicio">Inicio</a></li>
  <li><a href="#contato" onclick="document.getElementById('contato').style.display='block';document.getElementById('escurecer').style.display='block'">Contato</a></li>
  <li><a href="#sobre" onclick="document.getElementById('sobre').style.display='block';document.getElementById('escurecer').style.display='block'">Sobre</a></li>
</ul>

<div id="sobre" class="box"><h4>Sobre nós</h4><hr><br>

  <p>Lorem ipsum...</p>

</div>

<div id="contato" class="box"><h4>Fale conosco</h4><hr><br>

	<p>Lorem ipsum...</p>

</div>

        <div id="escurecer" class="escurecer" onclick="document.getElementById('escurecer').style.display='none';document.getElementById('sobre').style.display='none';document.getElementById('contato').style.display='none';"></div> 

Print

Problem - I think it could improve the functional mode of the stretch:

<div id="escurecer" class="escurecer" onclick="document.getElementById('escurecer').style.display='none';document.getElementById('sobre').style.display='none';document.getElementById('contato').style.display='none';"></div> 

---

document.getElementById('sobre').style.display='none';     

document.getElementById('contato').style.display='none';"

This is for cleaning/hiding divs floating.

I was wondering if someone would propose something to me.. Let’s say more beautiful about this repetition of lines.

Reminder - All the source code presented here, works round. I only came to reap improvements or alternatives in the given section. In which I find this very amateur.

Answer 1

There are several ways to do this, a basic example to make your code cleaner is

let classe = document.getElementsByClassName('link')
let escurecer = document.getElementById('escurecer')

escurecer.onclick = function(){
   escurecer.style.display = 'none'
   document.getElementById('modal').style.display = 'none'
}

for(let i = 0; i < classe.length; i++){
  classe[i].onclick = function(){
    document.getElementById('modal').style.display = 'block'
    escurecer.style.display = 'block'
    
    let attr = classe[i].getAttribute("href")
    // Coloco o conteudo
    
    if(attr == '#contato'){
      document.getElementById('modal').innerHTML = '<h1>Contato</h1>'
    }else{
        
      document.getElementById('modal').innerHTML = '<h1>Sobre</h1>'
    }
  }
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid #e7e7e7;
    background-color: #f3f3f3;
}

li {
    float: left;
}

li a {
    display: block;
    color: #666;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover:not(.ativo) {
    background-color: #ddd;
}

li a.ativo {
    color: white;
    background-color: #4CAF50;
}

.escurecer{
    display: none;
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background: black;
    z-index:1001;
    opacity:.80;
}

#modal {
    display: none;
    position: absolute;
    top: 30%;
    left: 37%;
    width: 25%;
    height: 37%;
    padding: 16px;
    border: 3px solid gray;
    background-color: white;
    z-index:1002;
    overflow: auto;
    text-align: center;
}

#contato {
    display: none;
    position: absolute;
    top: 30%;
    left: 37%;
    width: 25%;
    height: 37%;
    padding: 16px;
    border: 3px solid gray;
    background-color: white;
    z-index:1002;
    overflow: auto;
	  text-align: center;
}

<ul class="topnav">
  <li><a class="link ativo" href="#inicio">Inicio</a></li>
  <li><a class="link" href="#contato">Contato</a></li>
  <li><a class="link" href="#sobre">Sobre</a></li>
</ul>

<div id="modal" class="box"></div>
<div id="escurecer" class="escurecer"></div>

Remembering that it’s just an example of doing something Generatic, you can improve the code to get even better.