practice

　　　　

<html>

<meta charset="utf-8">

<style>
h1{font-size:18px;
color:#007f6f;}
#写真{border-radius:5px;
cursor:pointer;
transition:0.3s;}
#写真:hover{opacity:0.7;}
.ばつ印{display:block;
text-align:center;
color:#00ff00;
font-size:80px;
font-weight:bold;
transition:0.5s;}
.すけーる{display:none;
position:fixed;
z-index:1;
padding-top:100px;
left:0;
top:0;
width:100%;
height:100%;
overflow:auto;
background-color:rgb(0,0,0);
background-color:rgba(0,0,0,0.9);}
.ばつ印:hover,
.ばつ印:focus{color:#ff00ff;
text-decoration:none;
cursor:pointer;}
.ウインドウ{margin:auto;
display:block;
width:80%;
max-width:700px;}
.ウインドウ{animation-name:ネーム;
animation-duration:2s;}

@keyframes ネーム{from{transform:scale(0)}
to{transform:scale(1)}}

</style>

<h1>モーダル・ウィンドウ</h1>
<p>モーダル・ウィンドウとは, 元のウィンドウの上に別枠で表示されるウィンドウのこと. 操作が完了するか, またはキャンセル・ボタンが押されるまで表示され続けるため, 誤って他のウィンドウに移動しないのが特徴.</p>
<img id="写真"src="score_1.png"style="width:100%;max-width:100px">
<div id="もーだる"class="すけーる">
<span class="ばつ印">×</span>
<img class="ウインドウ"id="表示">
</div>

<script>
let すけーる=document.getElementById("もーだる");
let 画像=document.getElementById("写真");
let 音階=document.getElementById("表示");
画像.onclick=function()
{すけーる.style.display="block";
音階.src=this.src;}
let 拡大=document.getElementsByClassName("すけーる")[0];
拡大.onclick=function()
{すけーる.style.display="none";}
</script>

</html>