Here I have two different div and the pop-up is opening in it's parent window. How do I open it full-screen?

Screenshot:

Code: 

HTML:

<div class="popup-box">
<a class="pop-button" href=''>Pop up</a>
</div>

<div id="popup1" class="pop-overlay">
<div class="test-popup">
<h2>Here i am</h2>
<a class="closex" href=''>&times;</a>
<div class="pop-content">

Thank to pop me out of that button, but now i'm done so you can close this window.
</div>
</div>
</div>

CSS:
.pop-button {
font-size: 1em;
letter-spacing: 1px;
"Roboto", Helvetica, Arial, sans-serif;
font-weight: 200;
display: inline-block;
width: 150px;
padding: 1rem 2rem 1.0625rem;
color: #ffffff;
background-color: #0c83c6;
30px;
text-decoration: none;
cursor: pointer;
transition: all 0.3s ease-out;
}
.pop-button:hover {
background: rgba(12, 131, 198, 0.52);
color: blue;
}

.pop-overlay {
z-index: 999999999999999;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
}
.pop-overlay:target {
visibility: visible;
opacity: 1;
}

.test-popup {
70px auto;
padding: 20px;
background: #ececec;
border-radius: 5px;
width: 98%;
color: #505050;
z-index: 999999999999999;
position: relative;
transition: all 5s ease-in-out;
}

.test-popup h2 {
0;
color: #333;
Tahoma, Arial, sans-serif;
}
.test-popup .closex {
background: #606061;
color: #FFFFFF;
25px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.test-popup .closex:hover {
color: #06D85F;
}
.test-popup .pop-content {
max-height: 95%;
overflow: auto;
}

@media screen and (max-width: 700px){
.popup-box{
width: 80%;
}
.test-popup{
width: 80%;
}
}