HTML and CSS modal box faded background issue - html

Question

I'm using this modal box made from html and css on my website. It turns out fine for the main part, but I'm having a problem with the background fade.
It somehow only fades the background on the part of the site that appears over the position of the box (in the code). I'm using ID's to identify sections of the site (which is a one-page site) for the links in the menu. All sections that are below the section that contains the modal box, doesn't get faded.
Here is some of the code:
<div class="wrapper">
<a href="#modal" class="btn go">
<img src="img/i3.1.jpg" alt="image" />
</a>
<div id="modal">
<link href="css/modal.css" rel="stylesheet">
<div class="modal-content">
<div class="header">
<h2>Modal Heading</h2>
</div>
<div class="copy">
<p>Sample text in modal</p>
</div>
<div class="cf footer">
Close
</div>
</div>
<div class="overlay"></div>
</div>
And the CSS:
#modal {
left:50%;
margin:-250px 0 0 -40%;
opacity: 0;
position:absolute;
top:-50%;
visibility: hidden;
width:80%;
box-shadow:0 3px 7px rgba(0,0,0,.25);
box-sizing:border-box;
transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
}
#modal:target {
opacity: 1;
top:50%;
visibility: visible;
}
#modal .header,#modal .footer {
border-bottom: 1px solid #e7e7e7;
border-radius: 5px 5px 0 0;
}
#modal .footer {
border:none;
border-top: 1px solid #e7e7e7;
border-radius: 0 0 5px 5px;
}
#modal h2 {
margin:0;
}
#modal .btn {
float:right;
}
#modal .copy,#modal .header, #modal .footer {
padding:15px;
}
.modal-content {
background: #f7f7f7;
position: relative;
z-index: 20;
border-radius:5px;
}
#modal .copy {
background: #fff;
}
#modal .overlay {
background-color: #000;
background: rgba(0,0,0,.5);
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 10;
}
Can you guys help me figure this out?
Thank you so much
/Jonas