Clicking elements below a div?

Navigation
1

An example I can give: 

.noturno{
  z-index: 9000; 
  position: fixed; 
  height: 100%; 
  width: 100%; 
  background-color: rgba(0,0,0,0.5);
}
<div class="noturno">
</div>

<div class="corpo">
  <button>Teste</button>
  <a href="#">Teste 1</a>
</div>

I would like to know how to make div.noturno "transparent" for clicks, ie, can you click on the button, link, etc. below it?

    
asked by anonymous 07.01.2016 / 13:37

2 answers

4

Add in the night class css: 

pointer-events: none;
    
07.01.2016 / 13:50
1

Your div.noturno has pretty much the same CSS as the% fade div of modal , and its intention is precisely to prevent user interaction with the other elements of the page.

In this case, the dialog itself is only accessible because it has a z-index greater than the jQueryUI or is within modal .

z-index greater 

.noturno{
  z-index: 9000; 
  position: fixed; 
  height: 100%; 
  width: 100%; 
  background-color: rgba(0,0,0,0.5);
}

.corpo{
  position: relative; 
  z-index: 9001; 
}
<div class="noturno">
</div>

<div class="corpo">
  <button>Teste</button>
  <a href="#">Teste 1</a>
</div>

Internal div: 

.noturno{
  z-index: 9000; 
  position: fixed; 
  height: 100%; 
  width: 100%; 
  background-color: rgba(0,0,0,0.5);
}
<div class="noturno">
  <div class="corpo">
    <button>Teste</button>
    <a href="#">Teste 1</a>
  </div>
</div>
    
07.01.2016 / 13:52
How to use ng-repeat in a list of an object? Separate a string in php?