https://atahoi.com/wp-content/themes/atahoi/assets/js/example.js

1(function($) {  
2  // navigation
3  $(function(){
4    $('#nav__toggle').click(function(){
5      $("#header").toggleClass('active');
6      $("nav").slideToggle(500);
7    });
8    $('nav a').click(function(){
9      if(window.innerWidth <= 680){
10        $("#header").toggleClass('active');
11        $("nav").slideToggle(500);
12      }
13    });
14  });
15
16  $(".mv-slider__list").slick({
17    autoplay: true,
18    autoplaySpeed: 2000,
19    cssEase: 'linear',
20    fade: true,
21    infinite: true,
22  });
23
24  new ScrollHint(".js-scroll");
25
26  $(function () {
27    var headH = $("#header").outerHeight(); // ヘッダーの高さを取得
28    var animeSpeed = 500; // アニメーションスピード
29    $("a[href^='#']").on({
30        "click": function () {
31            var href = $(this).attr("href");
32            var target = $(href == "#" || href === "" ? "html" : href);
33            var position = target.offset().top - headH; // ターゲットまでの距離からヘッダーの高さを引く
34            $("body,html").stop().animate({
35                scrollTop: position
36            }, animeSpeed);
37            return false;
38        }
39    });
40  });
41
42  // ▼▼▼ ここからモーダル処理 ▼▼▼
43  $(function() {
44    const $modal = $('#modal');
45    const $modalInner = $modal.find('.modal-inner');
46    const $closeBtn = $modal.find('.modal-close');
47
48    $('.speakers__item').on('click', function() {
49      const $detail = $(this).find('.speaker-profile').html();
50      if ($detail) {
51        $modalInner.html($detail);
52        $modal.addClass('show');
53      }
54    });
55
56    $closeBtn.on('click', function() {
57      $modal.removeClass('show');
58    });
59
60    $modal.on('click', function(e) {
61      if ($(e.target).is($modal)) {
62        $modal.removeClass('show');
63      }
64    });
65  });
66
67  // モーダルを開くとき
68  $('body').addClass('modal-open');
69
70  // モーダルを閉じるとき
71  $('body').removeClass('modal-open');
72
73  // ▲▲▲ モーダル処理ここまで ▲▲▲
74  
75
76  $(".open-modal").on("click", function (e) {
77    e.preventDefault();
78  
79    const targetId = $(this).data("target");
80    const modalContent = $("#" + targetId).html(); // 対象のHTMLを読み込む
81  
82    $(".modal-inner").html(modalContent);
83    $(".modal").addClass("show");
84    $("body").css("overflow", "hidden");
85  });
86  
87  // モーダルを閉じる
88  $(".modal-close, .modal").on("click", function (e) {
89    if ($(e.target).is(".modal-close") || $(e.target).is(".modal")) {
90      $(".modal").removeClass("show");
91      $(".modal-inner").empty();
92      $("body").css("overflow", "");
93    }
94  });
95  
96})(jQuery);