モーダルウィンドウを作ってみよう！
モーダルウィンドウ
コード（Codepen）
コードはこちらから見ることができます。
See the Pen モーダルウィンドウ by Shin (@shin-ichi) on CodePen.
解説
【HTML解説】
ulタグとliタグ、imgタグを使って、オーソドックスに2枚の画像を表示しています。
【CSS解説】
.photo-grid{
//画像をgrid表示にするCSSです。
display: grid;
//画像をgrid形式で表示します。
margin: 0;
//外側の余白を0にします。
padding: 0;
//内側の余白を0にします。
width: 100%;
//幅をウィンドウいっぱい（100%）にします。
gap: 5px;
//画像と画像の間の余白(ギャップ)を5pxにします。
grid-template-columns: 1fr 1fr;
//一行に2枚の画像を配置して、その後は改行します。
list-style: none;
//各リストの箇条書き用ドットを非表示にします。
}
.photo-grid li img{
//grid表示にする画像のCSSです。
width: 100%;
//幅を100%にします。
cursor: pointer;
画像の上にマウスポインタが来た場合、ポインタ（手のアイコン）になります。
}
.modal{
//画像をクリックすると現れるモーダルウィンドウのCSSです。
display: none;
//非表示にします。
width: 50%;
//ウィンドウの50%幅にします。
visibility: hidden;
//非表示にします。
opacity: 0;
//透明にします。
}
.modal img{
//モーダルウィンドウに表示される画像のCSSです
width: 100%;
//幅を100%にします。
height: auto;
//高さは幅によって決まります。（縦横比を維持します。）
}
.photo-mask{
//モーダルウィンドウの半透明黒部分のCSSです。
position: fixed;
//位置は固定します。
top: 0;
//ウィンドウの一番上から始まります。
left: 0;
//ウィンドウの左端から始まります。
width: 100vw;
//幅はウィンドウいっぱいにします。
height: 100vh;
//高さはウィンドウいっぱいにします。
background-color: #000000;
//背景色を黒にします。
visibility: hidden;
//通常時は非表示にします。
opacity: 0;
//通常時は透明にしておきます。
z-index: 9998;
//画像の重なりは、9998にします。（表示したい画像の一つ下側に設定しています。）
}
.scale-up{
//モーダルウィンドウに表示したい画像のCSSです。（拡大表示画像用CSS）
position: fixed;
//位置は固定します。
display: block;
//ブロック要素に設定します。
top: 50%;
//ウィンドウ上部から画面50%の位置に画像を配置します。
left: 50%;
//ウィンドウ左端から画面50%の位置に画像を配置します。
transform: translate(-50%,-50%);
//画像の幅と高さ50%分、上側方向と左側方向に移動します。
visibility: visible;
//表示します。
opacity: 1;
//透明を解除します。
z-index: 9999;
//画像や要素の重なりを9999（一番上）にします。
}
.photo-mask-visible{
//半透明黒部分を表示するCSSです。
visibility: visible;
//表示します。
opacity: 0.6;
//透明度を0.6にします。（1が不透明、0が透明）
transition: 0.4s;
//0.4秒の間に変化します。
}
【JavaScript解説】
「.modal-item」というクラスを画像につけるとモーダルウィンドウで開けます。
//モーダルウィンドウのための画像とマスク（半透明の黒）を用意。「DOMContentLoaded」は、Bodyの最後にHTMLを追加するので、Bodyの前にJSファイルを読み込む際、DOM構造ができてから、という意味。でないとBodyがnullのためエラーになってしまう。
document.addEventListener("DOMContentLoaded", () => {
//DOMが全てロードし終わったら、下記のコードが実行される。
// モーダルウィンドウ用画像（仮）を作成
const modal = document.createElement("div");
//divタグを作成してmodalに代入しておく。
modal.className = "modal";
//modalのクラスネームをmodalにしておく。
modal.innerHTML = `<img class="modal-img" src="img/Resolution.jpg" alt="">`;
//modalの中に、画像を表示するhtmlタグを挿入しておく。
//モーダルウィンドウのための半透明黒マスクを作成
const photoMask = document.createElement("div");
//divタグを作成してphotoMaskに代入しておく。
photoMask.className = "photo-mask";
//photoMaskのクラスネームをphoto-maskにしておく。
// body の最後に追加
document.body.appendChild(modal);
//bodyタグ内の最後に、先ほど作成しておいたmodalを挿入する。（この時はまだ非表示）
document.body.appendChild(photoMask);
//bodyタグ内の最後に、先ほど作成しておいたphotoMaskを挿入する。（この時はまだ非表示）
//.modal-img (仮として作ったモーダルウィンドウの画像)と.modal-item（実際に表示したい画像）を読み込む。
const modalImg = document.querySelector('.modal-img');
//modalImgにモーダルウィンドウの画像（この時は仮画像）を代入しておく。
const modalItems = document.querySelectorAll('.modal-item');
//ページに表示されている画像(.modal-itemのクラスがついたもの)を全て取り出して、modalItemsに代入する。
//画像をクリックした時に、モーダルウィンドウを開く
modalItems.forEach((modalItem) => {
//modalItemsに入っている画像を全て取り出して、下記コードを実行する。（modalItemは今処理している1つの画像を表しています。）
modalItem.addEventListener('click', () => {
//modalItem（各画像）がクリックされたときに下記コードを実行する。
modalImg.src = modalItem.src;
//クリックした画像を仮に作成しておいたモーダルウィンドウ用の画像src（ソース）に代入する。
modal.classList.add('scale-up');
//モーダルウィンドウの画像を表示するクラスを付与する。（scale-upは画像を中央配置し、visibleにするCSS）
photoMask.classList.add('photo-mask-visible');
//半透明黒(マスク)を表示するクラスを付与する。
});
});
//マスク部分をクリックした時に、モーダルウィンドウを閉じる
photoMask.addEventListener('click', () => {
//半透明黒(マスク)をクリックした際に下記コードを実行する。
modal.classList.remove('scale-up');
//modalに付与されている画像を表示するクラスを取り除く。
photoMask.classList.remove('photo-mask-visible');
//半透明黒(マスク)を表示するクラスを取り除く。
});
});