https://honma-office.jp/wp-content/package/js/nc-modal.js

1export function initModal() {
2    const modals = document.querySelectorAll('.ncModal');
3
4    modals.forEach(modal => {
5        const trigger = modal.querySelector('.ncModal_trigger');
6        const wrapper = modal.querySelector('.ncModal_wrapper');
7        const container = modal.querySelector('.ncModal_inner'); 
8        const closeEls = modal.querySelectorAll('.ncModal_layer, .ncModal_close');
9
10        if (!trigger || !wrapper) return;
11
12        // 【開く】
13        trigger.addEventListener('click', (e) => {
14            e.preventDefault(); // 念のためaタグなどのデフォルト動作を防止
15            
16            if (container) container.scrollTop = 0;
17
18            // JSで直接スタイルを当てる（最優先にする）
19            wrapper.style.setProperty('display', 'block', 'important');
20            
21            // クラスも付与（アニメーション用）
22            setTimeout(() => {
23                wrapper.classList.add('active');
24            }, 10);
25
26            document.body.style.overflow = 'hidden';
27        });
28
29        // 【閉じる】
30        closeEls.forEach(el => {
31            el.addEventListener('click', () => {
32                wrapper.classList.remove('active');
33
34                // アニメーション（0.4s）が終わってから消す
35                setTimeout(() => {
36                    wrapper.style.setProperty('display', 'none', 'important');
37                    document.body.style.overflow = '';
38                }, 400);
39            });
40        });
41    });
42}