完成品
HTML
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title><linkrel="stylesheet"href="style.css"><script src="script.js"></script></head><body><inputtype="button"id="btn"value="押す"><!-- 変数に格納 --><divid="box"><!-- 変数に格納 --><pid="close">× <!-- 変数に格納 --><h2>ポップアップ</h2></p></div></body></html>CSS
@charset"UTF-8";#box{background:#FFF;border:1pxsolid#333;box-shadow:010px10px#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:5px20px;}#btn:hover{color:rgb(20,114,236);border:1pxsolidrgb(20,114,236);background-color:rgb(255,255,255);}#btn:active{background-color:#4A4;}JavaScript
window.onload=function(){//window の load イベントに対応するイベントハンドラletbox=document.querySelector("#box");//id要素取得letbtn=document.querySelector("#btn");//id要素取得letclose=document.querySelector("#close")//id要素取得letboxstyle=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";};}