Black_Star,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>
<style>
html, body{
height: 98%;
}
.field {
display: block;
position: relative;
background: #0C0C0E no-repeat 50% 50%;
width: 200px;
height: 600px;
margin: 1%;
border-radius: 5px;
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2);
font-family: Arial, sans-serif;
font-size: 1.2em;
line-height: 1.5;
}
.popup-box {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
width: 50px;
height: 50px;
border-radius: 5px;
background: rgba(0, 0, 0, 0.5);
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
font-family: Arial, sans-serif;
z-index: 9999999;
font-size: 14px;
border: 2px solid white;
display: none;
}
#blackout { background: rgba(0, 0, 0, 0.7);
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
width: 100%;
height: 100%;display: none;
}
#tetra {
width: 40px;
height: 40px;
background-color: green;
}
</style>
<body>
<div class="field">
<div id='tetra'></div>
</div>
<div class="popup-box"></div>
<script>
$('body').append('<div id="blackout"></div>');
$('#tetra, #blackout').on('click', (function() {
$('.popup-box ').toggle();
$('#blackout').toggle();
}))
</script>
</body>
</html>