＊モーダルウィンドウのサンプルです＊
ボタンをクリックすると全画面表示でモーダルウィンドウが現れ、ウィンドウ右上の×ボタンで閉じることができる、一般的なモーダルウィンドウのサンプルです。
用語解説：モーダルウィンドウ（modal window）
ユーザーの行動を制御できるので、警告や、確実に読んでもらいたい重大なお知らせを表示させるのに向いています。
一方で、多用するとユーザーをイラつかせてしまう原因にもなるため、ここぞという時だけにしておくのがおすすめです。
特に、広告をモーダルウィンドウとして表示させる場合は、ユーザーの即離脱の可能性が高まるのでリスクが高いと言えます。
コードの解説ですが、JavaScriptではクリック時にクラスの追加・削除をさせている他、body要素に対してoverflowプロパティが切り替わるようにしています。
モーダルウィンドウを全画面表示にするために「position:fixed」にしているのですが、このままだとモーダルウィンドウを表示させたまま、背景をスクロールさせてしまうことができます。
スクロールも含めて画面の移動ができないように制御するため、body要素のoverflowプロパティの値を切り替えているというわけです。
また、iPhoneではそれでもまだスクロールさせることができてしまうため、デフォルトのイベントをキャンセルする関数（disableScroll）を定義した後、document.addEventListener(‘touchmove’, disableScroll, { passive: false });と付け加えることで、iPhoneでもスクロールできないようにしています。
技術的に難しい部分はそんなに無いので、Web制作初心者でも取り入れやすい機能だと言えます。
ですが使い所が難しいので、「本当にモーダルウィンドウにする必要があるかどうか？」ということを、実装前に検討すると良いでしょう。
主な使用機能：CSS・JavaScript
上記のサンプルコードを掲載しています。学習用としてご自由にコピペしてお使い下さい。（※スクロールできます）
HTML・CSS
<!DOCTYPE html>
<html lang="ja" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<style>
p {
margin-block-start: 0;
margin-block-end: 0;
}
.sample_modalwindow_box {
font-family: "游ゴシック体 Medium","游ゴシック体","游ゴシック Medium","Yu Gothic","YuGothic",sans-serif;
display: flex;
flex-direction: column;
width: fit-content;
margin: 1.5rem auto;
row-gap:20px;
background-image: repeating-linear-gradient(45deg, #fff086 10%, white 10%, white 20%, #fff086 20%, #fff086 30%, white 30%);
padding: 20px;
border: solid lightgrey;
border-radius: 10px;
transition: all .5s;
}
.sample_modalwindow_box:hover {
background-color: rgb(250 63 63);
background-blend-mode: luminosity;
color: red;
}
.sample_modalwindow_box button {
font-size: 16px;
width: fit-content;
margin: 0 auto;
cursor: pointer;
}
.sample_modalwindow {
width: 100%;
height: 100%;
visibility: hidden;
opacity: 0;
transition: all .5s;
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(0, 0, 0, 0.44);
position:fixed;
z-index: 100;
top: 0;
left: 0;
}
.sample_modalwindow.active {
visibility: visible;
opacity: 1;
}
.sample_oshirase {
font-family: sans-serif;
padding: 20px;
width: fit-content;
color: black;
background-color: white;
position: relative;
line-height: 1.5;
}
.sample_peke {
width: fit-content;
padding: 5px 10px;
border-radius: 50%;
background-color: grey;
color: white;
position: absolute;
right: -15px;
top: -15px;
cursor: pointer;
}
.sample_peke:hover {
background-color: lightgrey;
color: black;
}
</style>
</head>
<body>
<div style="height:150px;">
</div>
<div class="sample_modalwindow_box" ontouchstrat="">
重要なお知らせをご確認ください。
<button class="sample_kakuninbt" type="button" name="button">確認する</button>
<div class="sample_modalwindow">
<p class="sample_oshirase">特にお知らせはありません！<br>サンプルはいかがでしたか？<span class="sample_peke">×</span></p>
</div>
</div>
<script type="text/javascript" defer>
{
const sample_kakuninbt = document.querySelector('.sample_kakuninbt');
const sample_modalwindow = document.querySelector('.sample_modalwindow');
const sample_peke = document.querySelector('.sample_peke');
const sample_oshirase = document.querySelector('.sample_oshirase');
function disableScroll(event) {
event.preventDefault();
}
sample_kakuninbt.addEventListener('click', () => {
sample_modalwindow.classList.add('active');
document.body.style.overflow = 'hidden';
document.addEventListener('touchmove', disableScroll, { passive: false });
});
sample_peke.addEventListener('click', () => {
sample_modalwindow.classList.remove('active');
document.body.style.overflow = 'auto';
document.removeEventListener('touchmove', disableScroll, { passive: false });
});
}
</script>
</body>
</html>
