完成品
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<input type="button" id="btn" value="押す"> <!-- 変数に格納 -->
<div id="box"> <!-- 変数に格納 -->
<p id="close">× <!-- 変数に格納 -->
<h2>ポップアップ</h2>
</p>
</div>
</body>
</html>
###CSS
@charset "UTF-8";
#box {
background: #FFF;
border: 1px solid #333;
box-shadow: 0 10px 10px #999;
display: none; /*! id要素に対してdisplay:none */
font-family: serif;
padding: 10px;
position: relative;
text-align: center;
width: 200px;
}
#box > #close {
background-color: #EEE;
color: #333;
cursor: pointer;
height: 30px;
line-height: 30px;
margin: 0;
position: absolute;
right: 1px;
text-align: center;
top: 1px;
width: 30px;
}
#box > #close:hover {
background-color: #F9F9F9;
color: #999;
}
#btn {
background-color: rgb(20, 114, 236);
border: 0;
color: #FFF;
cursor: pointer;
padding: 5px 20px;
}
#btn:hover {
color: rgb(20, 114, 236);
border: 1px solid rgb(20, 114, 236);
background-color: rgb(255, 255, 255);
}
#btn:active {
background-color: #4A4;
}
JavaScript
window.onload= function(){ //window の load イベントに対応するイベントハンドラ
let box = document.querySelector("#box"); //id要素取得
let btn = document.querySelector("#btn"); //id要素取得
let close = document.querySelector("#close") //id要素取得
let boxstyle = box.style; //boxのstyle値をboxstyleに格納
btn.onclick = function(){ //btnがクリックされた時動かす関数
if(boxstyle.display === "block"){
boxstyle.display = "none";
}else{
boxstyle.display = "block";
}
};
close.onclick= function(){ //closeがクリックされた時の関数
boxstyle.display = "none";
};
}