https://www.jcb.co.jp/common_new/js/modal_window.js

1$(function() {
2  var onClickCloseFloatWindow;
3
4  $(".modalWindow_openBtn").on("click", function() {
5    var targetAttribute = $(this).data('modal');
6    var targetModal = $("#"+targetAttribute);
7    targetModal.addClass("open");
8    targetModal.children(".modalWindow_base").css("max-height", $(window).height() - 108);
9    targetModal.find(".modalWindow_inner").css("max-height", $(".modalWindow_base").height() * 0.9 - 108);
10
11    $(window).on("resize", function() {
12      targetModal.children(".modalWindow_base").css("max-height", $(window).height() - 108);
13      targetModal.find(".modalWindow_inner").css("max-height", $(".modalWindow_base").height() * 0.9 - 108);
14    });
15
16    $("body").css("overflow", "hidden");
17    $("#fixedMovePageTop").hide();
18    $(".modalWindow, .modalWindow_closeBtn").on("click", onClickCloseFloatWindow);
19    return $(".modalWindow_base").on("click", function(e) {
20      return e.stopPropagation();
21    });
22  });
23  onClickCloseFloatWindow = function(e) {
24    $(".modalWindow").css("opacity", "").removeClass("open");
25    $("#fixedMovePageTop").show();
26    return $("body").css("overflow", "");
27  };
28
29});
30
31// new-modal
32$(document).ready(function() {
33
34  // モーダルの高さを調整する関数
35  function adjustModalHeight() {
36    var vh = window.innerHeight * 0.9;
37    $('.customModal').css('max-height', vh + 'px');
38  }
39
40  // モーダルの開くボタンのクリックイベント
41  $('.js-modal-open').on('click', function() {
42    const modalId = $(this).data('modal');
43    const modal = $('#' + modalId);
44    const overlay = $('.customModalOverlay');
45
46    $('body').addClass('modalOpen');
47    overlay.removeAttr('hidden');
48    modal.removeAttr('hidden').addClass('show');
49    $(this).attr('aria-expanded', 'true');
50    adjustModalHeight();
51  });
52
53  // モーダルの閉じるボタンのクリックイベント
54  $('.customModal__closeButton').on('click', function() {
55    closeCustomModal($(this).closest('.customModal'));
56  });
57
58  // オーバーレイのクリックイベント
59  $('.customModalOverlay').on('click', function() {
60    const modal = $('.customModal.show');
61    closeCustomModal(modal);
62  });
63  
64  // モーダルを閉じる関数
65  function closeCustomModal(modal) {
66    const overlay = $('.customModalOverlay');
67
68    modal.addClass('hide');
69
70    setTimeout(function() {
71      modal.attr('hidden', 'true').removeClass('show hide');
72      overlay.attr('hidden', 'true'); 
73    }, 300);
74
75    const openButton = $('.js-modal-open[data-modal="' + modal.attr('id') + '"]');
76    openButton.attr('aria-expanded', 'false');
77    
78    $('body').removeClass('modalOpen');
79  }
80
81  $(window).on('resize', adjustModalHeight);
82  $(window).on('scroll', adjustModalHeight);
83});