https://www.glico.com/parts/assets/javascripts/glico_global_modal.js

1(function(){
2
3    $('body').css('overflowY', 'auto');
4
5
6})();
7
8    
9// 商品一覧のモーダル
10document.querySelectorAll('.modal__trigger').forEach(
11    (button) => {
12        button.addEventListener('click', (e) => {
13            const dialogId = button.getAttribute('aria-controls');
14            if (!dialogId) {
15                console.error('No aria-controls attribute found on modal trigger button.');
16                return;
17            }
18            const dialog = document.getElementById(dialogId);
19            if (!dialog) {
20                console.error(`No dialog found with id: ${dialogId}`);
21                return;
22            }
23            dialog.showModal();
24            button.setAttribute('aria-expanded', 'true');
25            
26            // 閉じた時にaria-expandedをfalseに戻す
27            dialog.addEventListener('close', () => {
28                button.setAttribute('aria-expanded', 'false');
29            }, { once: true });
30            
31            $(`#${dialogId} .product03`).masonry({
32                itemSelector: '.product03__section',
33                percentPosition: true,
34                transitionDuration: 0
35            });
36        });
37    }
38);
39
40// Nutrition Facts モーダル
41document.querySelectorAll('.modal__facts__trigger').forEach(
42    (button) => {
43        button.addEventListener('click', (e) => {
44            const dialogId = button.getAttribute('aria-controls');
45            if (!dialogId) {
46                console.error('No aria-controls attribute found on modal trigger button.');
47                return;
48            }
49            const dialog = document.getElementById(dialogId);
50            if (!dialog) {
51                console.error(`No dialog found with id: ${dialogId}`);
52                return;
53            }
54            dialog.showModal();
55            button.setAttribute('aria-expanded', 'true');
56            
57            // 閉じた時にaria-expandedをfalseに戻す
58            dialog.addEventListener('close', () => {
59                button.setAttribute('aria-expanded', 'false');
60            }, { once: true });
61        });
62    }
63);    
64
65document.querySelectorAll('dialog button.close').forEach(
66    (button) => {
67        button.addEventListener('click', (e) => {
68            const dialog = button.closest('dialog');
69            dialog.close();
70        });
71    }
72);