https://clubman.co.jp/modal-reservation/js/modal.js

1// モーダルを開く関数
2        function openModal(modalId) {
3            const modal = document.getElementById(modalId);
4            if (modal) {
5                modal.classList.add('active');
6                document.body.style.overflow = 'hidden';
7                
8                // フォーカスをモーダル内に移動
9                const closeButton = modal.querySelector('.close-btn');
10                if (closeButton) {
11                    closeButton.focus();
12                }
13            }
14        }
15
16        // モーダルを閉じる関数
17        function closeModal(modal) {
18            modal.classList.remove('active');
19            document.body.style.overflow = 'auto';
20        }
21
22        // トグルスイッチの切り替え
23        function toggleSetting(toggle) {
24            toggle.classList.toggle('active');
25        }
26
27        // DOMが読み込まれた後に実行
28        document.addEventListener('DOMContentLoaded', function() {
29            // モーダルを開くリンクのイベントリスナー
30            document.querySelectorAll('.modal-link').forEach(link => {
31                link.addEventListener('click', function(event) {
32                    event.preventDefault();
33                    const modalId = this.getAttribute('data-modal');
34                    openModal(modalId);
35                });
36
37                // キーボードイベント
38                link.addEventListener('keydown', function(event) {
39                    if (event.key === 'Enter' || event.key === ' ') {
40                        event.preventDefault();
41                        const modalId = this.getAttribute('data-modal');
42                        openModal(modalId);
43                    }
44                });
45            });
46
47            // 閉じるボタンのイベントリスナー
48            document.querySelectorAll('.close-btn, .close-modal').forEach(button => {
49                button.addEventListener('click', function() {
50                    const modal = this.closest('.modal-overlay');
51                    closeModal(modal);
52                });
53            });
54
55            // 背景クリックでモーダルを閉じる
56            document.querySelectorAll('.modal-overlay').forEach(overlay => {
57                overlay.addEventListener('click', function(event) {
58                    if (event.target === this) {
59                        closeModal(this);
60                    }
61                });
62            });
63
64            // トグルスイッチのイベントリスナー
65            document.querySelectorAll('.toggle').forEach(toggle => {
66                toggle.addEventListener('click', function() {
67                    toggleSetting(this);
68                });
69            });
70
71            // ESCキーでアクティブなモーダルを閉じる
72            document.addEventListener('keydown', function(event) {
73                if (event.key === 'Escape') {
74                    const activeModal = document.querySelector('.modal-overlay.active');
75                    if (activeModal) {
76                        closeModal(activeModal);
77                    }
78                }
79            });
80        });