https://haiyoshin.com/assets/js/modal.js?0427

1document.addEventListener("DOMContentLoaded", function () {
2  const modal = document.querySelector(".modal");
3  const body = document.body;
4
5  const questions = document.querySelectorAll(".modal-body dl");
6  const seeyou = document.querySelector(".modal-seeyou"); // いいえ用
7  const messagePopup = document.querySelector(".modal-body .message"); // 追加（途中ポップアップ）
8
9  const butterfly = document.querySelector(".butterfly");
10
11  // 初期化（1問目だけ表示）
12  function initQuestions() {
13    questions.forEach((q, index) => {
14      q.classList.remove("active");
15      if (index === 0) {
16        q.classList.add("active");
17      }
18    });
19    seeyou.classList.remove("active");
20    /*setTimeout(() => {
21      questions[index + 1].classList.add('active');
22    }, 1000);*/
23    if (messagePopup) messagePopup.classList.remove("active"); // ←追加
24  }
25
26  // モーダル開いた時に初期化
27  const openBtn = document.querySelector(".banner-clinic");
28  openBtn.addEventListener("click", function () {
29    modal.classList.add("active");
30    body.classList.add("no-scroll");
31    initQuestions();
32    butterfly.classList.remove("again");
33    butterfly.classList.add("fadeout");
34    butterfly.classList.add("is-hidden");
35  });
36
37  // 閉じる
38  function closeModal() {
39    modal.classList.remove("active");
40    body.classList.remove("no-scroll");
41    butterfly.classList.remove("is-hidden", "fadeout");
42    butterfly.classList.add("again");
43    console.log(butterfly.classList);
44  }
45
46  // 「いいえ」時
47  function showMessageAndClose() {
48    questions.forEach((q) => q.classList.remove("active"));
49    seeyou.classList.add("active");
50
51    setTimeout(() => {
52      seeyou.classList.remove("active");
53      closeModal();
54    }, 1500);
55  }
56
57  document.querySelector(".modal-close").addEventListener("click", closeModal);
58
59  modal.addEventListener("click", function (e) {
60    if (e.target === modal) {
61      closeModal();
62    }
63  });
64
65  // 「はい」「いいえ」制御
66  questions.forEach((dl, index) => {
67    const yesBtn = dl.querySelector(".yes");
68    const noBtn = dl.querySelector(".no");
69
70    // はい
71    yesBtn.addEventListener("click", function () {
72      // ✅ 2問目の「はい」だけ特別処理
73      /*if (index === 1 && messagePopup) {
74        dl.classList.remove('active');
75
76        messagePopup.classList.add('active');
77
78        setTimeout(() => {
79          messagePopup.classList.remove('active');
80
81          if (questions[index + 1]) {
82            questions[index + 1].classList.add('active');
83          }
84        }, 4000);
85
86        return;
87      }*/
88
89      // ✅ 最後の質問
90      if (index === questions.length - 1) {
91        window.location.href = "./clinic/";
92        return;
93      }
94
95      // 通常遷移
96      dl.classList.remove("active");
97
98      if (questions[index + 1]) {
99        questions[index + 1].classList.add("active");
100      }
101    });
102
103    // いいえ
104    noBtn.addEventListener("click", function () {
105      // messageのときだけ特別処理
106      if (dl.classList.contains("message")) {
107        dl.classList.remove("active");
108
109        if (questions[index + 1]) {
110          questions[index + 1].classList.add("active");
111        }
112        return;
113      }
114
115      // 通常は閉じる
116      showMessageAndClose();
117    });
118  });
119});