Css dropdown menu when opening should make the page dark

Question

I made a dropdown menu with bootstrap, but I want that when this menu opens (it opens on top of the content of the page), the whole page is in an opaque effect. I tried to do something like this by fiddling with the background, but it didn’t look good on the images, I wanted like a darker layer over the whole page.

 <header class="header">
   <div class="dropdown">
    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Menu
    <span class="caret"></span></button>
    <ul class="dropdown-menu">
     <li><a href="#">1</a></li>
     <li><a href="#">2</a></li>
     <li><a href="#">3</a></li>
    </ul>
  </div>
 </div>
 <main class="content">
 </main>
 <footer class="footer"><p>Copyrights</p></footer>

Answer 1

Surely there are ways to make it better, but this is the way I found it easier.

I added a div with the id back;

I put the list items with the class menu-item;

I put the id menu on the button;

I added CSS and Javascript.

window.onload = function(){
menu = document.getElementById('menu');
back = document.getElementById('back');
item = document.getElementsByClassName('menu-item');

for (var i = 0; i < item.length; i++) {
    item[i].addEventListener('click', function(){ back.style.display = 'none'});
}

menu.addEventListener('click', function(){ back.style.display = 'block' });
back.addEventListener('click', function(){ back.style.display = 'none' });
}

#back{
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(0,0,0,0.5);
  width: 100%;
  height: 100%;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<header class="header">
   <div class="dropdown">
    <button id="menu" class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Menu
    <span class="caret"></span></button>
    <ul class="dropdown-menu">
     <li class="menu-item"><a href="#">1</a></li>
     <li class="menu-item"><a href="#">2</a></li>
     <li class="menu-item"><a href="#">3</a></li>
    </ul>
  </div>
 <main class="content">
 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 </main>
 <footer class="footer"><p>Copyrights</p></footer>
 <div id="back"></div>