Which correct way to apply Lightbox to each descriptive link and clean

Navigation
0

I have a small turnaround. I need your help for a change.

I am practicing on a personal project, the Light Box effect and if possible I would like to listen to the expensive colleague . Be pointing 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-IthinkIcouldimprovethefunctionalmodeoftheexcerpt:

<divid="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 to clear / hide the floating divs .

I wanted to know if anyone proposes something to me .. let's say more beautiful in relation to this repetition of lines.

Reminder - All the source code presented here works round. I just came to pick improvements or alternatives in that particular section. In which I find this very amateur.

    
asked by anonymous 17.10.2017 / 04:58

1 answer

1

There are several ways to do this, a basic example to make your code clean 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 generic, you can improve the code to get better.

    
17.10.2017 / 14:32
MP3 Player html5 and javascript Sending the token via header or param