Popup på hjemmeside virker ikke optimalt...

Hej Eksperter
Jeg har lavet en popup til min hjemmeside, og den virker som den skal, bortset fra én ting. Når jeg får vist popup'en, kan man se noget af selve hjemmesiden igennem popup'en.

Her er min kode:

css:
.popup-position {
width:100%;
height:100%;
display:none;
position:fixed;
top:0px;
left:0px;
background:rgba(0,0,0,0.75);
}

#popup-wrapper {
  width: 600px;
  margin: 170px auto;
  text-align: left;
}

#popup-container {
  max-width:700px;
width:90%;
padding:40px;
position:absolute;
top:50%;
left:50%;
-webkit-transform:translate(-50%, -50%);
transform:translate(-50%, -50%);
box-shadow:0px 2px 6px rgba(0,0,0,1);
border-radius:3px;
background:#fff;
}

script:
<script type="text/javascript">
<!--
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == &#039;block&#039;)
e.style.display = &#039;none&#039;;
else
e.style.display = &#039;block&#039;;
}
//-->
</script>

html:
(Selve popup'en)
<div id="popup-box1" class="popup-position">
<div id="popup-wrapper">
<div id="popup-container">
<p>tekst</p>
<p><a href="java script:void(0)" onclick="toggle_visibility(&#039;popup-box1&#039;);">Luk</a></p>
</div><!-- Popup container end -->
</div><!-- Popup wrapper popup end -->
</div><!-- Popupbox 1 end -->

(Knappen der trykkes på ved åbning af popup'en)
<div class="et_pb_button_module_wrapper et_pb_module et_pb_button_alignment_">
<div id="wrapper">
<a class="et_pb_button et_pb_button_0 et_pb_module et_pb_bg_layout_light" href="java script:void(0)" onclick="toggle_visibility(&#039;popup-box1&#039;)">LÆS MERE</a></p>
</div><!-- Wrapper end --></div>