モーダルウィンドウ
dialog要素を使うことで簡単に作れた。
dialog要素とは
HTMLの要素でモーダルダイアログやポップアップウィンドウを簡単に作成するために使用できる。
これを使うことで対話的に操作できるコンテンツをページの上に重ねて表示することができる。
index.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" />
<title>modal</title>
</head>
<body>
<button id="button">クリック</button>
<dialog id="dialog">
<h1>モーダルウィンドウ</h1>
<button id="close">閉じる</button>
</dialog>
<script src="script.js"></script>
</body>
</html>
script.js
const button = document.getElementById("button");
const dialog = document.getElementById("dialog");
const close = document.getElementById("close");
button.addEventListener("click", () => {
dialog.showModal();
});
close.addEventListener("click", () => {
dialog.close();
});
デモ
See the Pen Untitled by MK2024 (@MK2024pen) on CodePen.
CSSを指定せずにモーダルウィンドウを作ることができた。
- 背景色の変更にはCSSで
dialog::backdropで変更できる。 -
showModal()ではなくshow()を使うと他の要素も操作することができる。
スライドメニュー
ボタンを押したら左側からメニューが流れてくるものを作る。
メニューには閉じるボタンがついている。
index.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" />
<title>slide</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<button id="open">クリック</button>
<div id="menu">
<button id="close">閉じる</button>
<h2>スライドメニュー</h2>
</div>
<script src="script.js"></script>
</body>
</html>
style.css
#menu {
position: fixed;
top: 0;
left: 0;
width: 250px;
height: 100%;
background-color: lightgray;
transform: translateX(-100%);
transition: transform 0.3s ease;
}
#menu.open {
transform: translateX(0);
}
#close {
position: absolute;
right: 0px;
}
script.js
const openMenuButton = document.getElementById('open');
const closeMenuButton = document.getElementById('close');
const sideMenu = document.getElementById('menu');
openMenuButton.addEventListener('click', () => {
sideMenu.classList.add('open');
});
closeMenuButton.addEventListener('click', () => {
sideMenu.classList.remove('open');
});
デモ
See the Pen Untitled by MK2024 (@MK2024pen) on CodePen.
- 下記のコードを追加することでメニュー外をクリックしたら閉じるようにできる。
script.js
document.addEventListener('click', (event) => {
if (!sideMenu.contains(event.target) && !openMenuButton.contains(event.target)) {
sideMenu.classList.remove('open');
}
});