【コピペOK】JavaScriptを使ってモーダルウィンドウを作ろう / chillblog

Contents

モーダルウィンドウとは

モーダルウィンドウとは、特定の操作を行なわないと、他の画面を操作できないウィンドウのことです。

モーダルウィンドウの主な役割は、以下の通りになります。

情報を分かりやすく伝達させる
警告メッセージを表示する
エラーの通知をする
ロード中の操作を防ぐ

モーダルウィンドウと酷似しているものとして、ポップアップウィンドウがあります。

ポップアップウィンドウについての詳しい記事はこちらから。

【コピペOK】CSSでポップアップウィンドウを作ろう！ / HTML・CSS

コード

html

<!DOCTYPE html>
<html lang="ja">
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <title>モーダルウィンドウ</title>
</head>
<body> <div class="item"> <div class="item-card"> <img class="img1" src="https://picsum.photos/id/237/400/300" alt=""> <button class="open">view more</button> </div> <div class="item-card"> <img class="img1" src="https://picsum.photos/id/237/400/300" alt=""> <button class="open">view more</button> </div> <div class="item-card"> <img class="img1" src="https://picsum.photos/id/237/400/300" alt=""> <button class="open">view more</button> </div> </div> <div id="window" class="modal"> <div class="modal-content"> <div class="modal-header"> <h1>タイトルが入ります</h1> <span class="Close">×</span> </div> <div class="modal-main"> <img class="img2" src="https://picsum.photos/id/237/400/300" alt=""> <p>ここにテキストが入ります。ここにテキストが入ります。</p> </div> </div> </div> <script src="window.js"></script>
</body>
</html>

css

@charset "utf-8";
body { font-family: serif; font-size: 16px; line-height: 1.6; color: #fff; } .item{ display: flex; flex-wrap: wrap; justify-content: space-between; } .item-card{ width: 30%; text-align: center; } .open { display: inline-block; background: #000; color: #fff; padding: 0 2em; border: 0; width: 100%; height: 50px; font-size: 15px; border-radius: 5px; font-weight: 900; font-family: serif; } .open:hover { background: #f1590d; cursor: pointer; } .img1{ width: 100%; border-radius: 10px;
}
.img2{ width: 100%;
} .modal { display: none; position: fixed; z-index: 1; left: 0; top: 0; height: 100%; width: 100%; overflow: auto; background-color: rgba(0,0,0,0.5); } .modal-content { background-color: #fff; margin: 20% auto; width: 50%; box-shadow: 0 5px 8px 0 rgba(0,0,0,0.2),0 7px 20px 0 rgba(0,0,0,0.17); border-radius: 10px; animation-name: modalopen; animation-duration: 1s; } @keyframes modalopen { from {opacity: 0} to {opacity: 1} } .modal-header h1 { font-size: 15px; margin:10px 0 5px; } .modal-header { background: #000; border-radius: 10px 10px 0 0; padding: 0 5%; display: flex; align-items: center; justify-content: space-between; } p{ color: #000; font-style: 12px; padding: 2% 5% 5% 5%; } .Close { font-size: 2rem; } .Close:hover { cursor: pointer; } .modal-body { padding: 10px 20px; color: black; }

JavaScript

const buttonOpen = document.querySelectorAll('.open');
const modal = document.getElementById('window');
const buttonClose = document.getElementsByClassName('Close')[0];
for(let i=0;i<buttonOpen.length;i++){
buttonOpen[i].addEventListener('click', Open);
function Open() { modal.style.display = 'block';
}
}
buttonClose.addEventListener('click', Close);
function Close() { modal.style.display = 'none';
}
addEventListener('click', outsideClose);
function outsideClose(e) { if (e.target == modal) { modal.style.display = 'none'; }
}