https://with-house.jp/js/plan-modal.js

1document.addEventListener('DOMContentLoaded', function () {
2
3  /* ========================================
4   * プラン詳細遷移用モーダル
5   * ======================================== */
6  const planModal = document.getElementById('planModal');
7
8  if (planModal) {
9    const openButtons = document.querySelectorAll('.js-plan-modal-open');
10    const targetLinks = planModal.querySelectorAll('[data-plan-link]');
11
12    const planUrlMap = {
13      'two-day': 'https://with-house.jp/plan/two-day/',
14      'one-day': 'https://with-house.jp/plan/one-day/'
15    };
16
17    const openPlanModal = function (planType) {
18      const targetUrl = planUrlMap[planType];
19
20      if (!targetUrl) return;
21
22      targetLinks.forEach(function (link) {
23        link.setAttribute('href', targetUrl);
24      });
25
26      planModal.classList.add('is-open');
27      planModal.setAttribute('aria-hidden', 'false');
28      document.body.classList.add('is-plan-modal-open');
29    };
30
31    const closePlanModal = function () {
32      planModal.classList.remove('is-open');
33      planModal.setAttribute('aria-hidden', 'true');
34      document.body.classList.remove('is-plan-modal-open');
35    };
36
37    const closeBtn = planModal.querySelector('.modal_close');
38
39    if (closeBtn) {
40      closeBtn.addEventListener('click', closePlanModal);
41    }
42
43    openButtons.forEach(function (button) {
44      button.addEventListener('click', function (e) {
45        e.preventDefault();
46
47        openPlanModal(e.currentTarget.dataset.planType);
48      });
49    });
50
51    planModal.addEventListener('click', function (e) {
52      if (e.target === planModal) {
53        closePlanModal();
54      }
55    });
56
57    document.addEventListener('keydown', function (e) {
58      if (
59        e.key === 'Escape' &&
60        planModal.classList.contains('is-open')
61      ) {
62        closePlanModal();
63      }
64    });
65  }
66
67
68  /* ========================================
69   * 初回エリア選択モーダル
70   * ======================================== */
71  const areaModal = document.getElementById('planAreaModal');
72
73  if (areaModal) {
74    const areaButtons = areaModal.querySelectorAll('.js-plan-area-select');
75
76    areaModal.classList.add('is-open');
77    areaModal.setAttribute('aria-hidden', 'false');
78    document.body.classList.add('is-plan-area-modal-open');
79
80    areaButtons.forEach(function (button) {
81      button.addEventListener('click', function () {
82        const displayType = button.dataset.planDisplay;
83
84        if (displayType === 'limited') {
85          document
86            .querySelectorAll('.js-plan-price[data-type="normal"]')
87            .forEach(function (item) {
88              item.classList.remove('is-active');
89            });
90
91          document
92            .querySelectorAll('.js-plan-price[data-type="limited"]')
93            .forEach(function (item) {
94              item.classList.add('is-active');
95            });
96        }
97
98        areaModal.classList.remove('is-open');
99        areaModal.setAttribute('aria-hidden', 'true');
100        document.body.classList.remove('is-plan-area-modal-open');
101      });
102    });
103  }
104
105});