I am presenting the following code
<!DOCTYPE html>
<html>
<head>
<title>GalacticCraft</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="shortcut icon" type="image/png" href="favicon.ico">
</head>
<body>
<div id="staff"></div>
<div id="portal">
<img id="logo" src="assets/logo.png">
<div id="buttons">
<a href="http://forums.galacticmc.net"><div class="button" id="button1"></div></a><a href="http://store.galacticmc.net"><div class="button" id="button2"></div></a><a href="http://galacticmc.net/rules"><div class="button" id="button3"></div></a><div class="button" id="button4" onclick="staff()"></div><a href="http://galacticmc.net/vote"><div class="button" id="button5"></div></a>
</div>
</div>
</body>
</html>
<script>
function staff() {
document.getElementById('staff').innerHTML = `
<div class="popup" onclick="close()"></div><img src="assets/close.png" class="close-icon" onclick="close()"><div class="popup-menu"><a href="http://www.galacticmc.net/staff-application"><img src="assets/apply.png" class="apply"><p>Apply to become a member of staff</p></a><hr><a href="http://galacticmc.net/staff"><img src="assets/staff.png" class="list-staff"><p>View Staff Members</p></a></div>
`
}
</script>
and CSS
.popup {
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
position: absolute;
z-index: 5;
opacity: 0.5
}
.popup-menu {
top: 0;
width: 700px;
height: 99.6%;
background-color: #fff;
position: absolute;
z-index: 10;
left:calc(50% - 351px);
border: 2px solid #808080;
-webkit-animation: fadein 1s; /* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadein 1s; /* Firefox < 16 */
-ms-animation: fadein 1s; /* Internet Explorer */
-o-animation: fadein 1s; /* Opera < 12.1 */
animation: fadein 1s;
padding-left: 20px;
}
.apply {
width: 350px;
height: 350px;
position: relative;
left: calc(50% - 185px);
}
.popup-menu p {
color: #009AFF;
text-align: center;
font-size: 35px;
}
.popup-menu a {
text-decoration: none
}
.list-staff {
width: 350px;
height: 350px;
position: relative;
left: calc(50% - 185px);
}
.close {
position: absolute;
top: 2px;
right: 2px;
}
html {
background-image: url("assets/bg.png");
background-size: 100%;
overflow: hidden;
width: 100%;
height: 100%;
}
#portal {
bottom: 0;
height: 550px;
left: 0;
margin: auto;
position: absolute;
right: 0;
text-align: center;
top: 0;
width: 1000px;
}
#buttons {
bottom:75px;
height:200px;
position:absolute;
width:1000px;
}
.button {
background-position:center;
background-repeat:no-repeat;
background-size:190px;
cursor:pointer;
display:inline-block;
height:200px;
transition:background-size .2s ease;
width:200px;
}
.button:hover {background-size:200px}
.button:active {background-size:180px}
#button1 {background-image:url("assets/forums.png")}
#button2 {background-image:url("assets/store.png")}
#butt
on3 {background-image:url("assets/rules.png")}
#button4 {background-image:url("assets/staff.png")}
#button5 {background-image:url("assets/vote.png")}
@keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Firefox < 16 */
@-moz-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Internet Explorer */
@-ms-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Opera < 12.1 */
@-o-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
Study our JSFiddle for further details https://jsfiddle.net/vgjvzmp5/
Upon clicking "Click me", you will observe a popup window appearing. It is functioning as intended, but how can I implement a method to close it when the faded background or the close icon in the corner is clicked? This implementation should be done using pure Javascript.