$(function () {
  const $window = $(window);
  const $body = $("body");
  const $modal = $('[data-tps-modal="target"]');
  const $headerPc = $(".hdr_fixedWrap");
  const $headerSp = $("#navFixed");
  const $open = $('[data-tps-modal="open"]');
  const $close = $('[data-tps-modal="close"]');

  const adjustModalStyles = () => {
    let headerHeight;

    if ($headerSp.css("display") !== "none") {
      headerHeight = $headerSp.innerHeight();
    } else {
      headerHeight = $headerPc.innerHeight();
    }

    $modal.css("top", headerHeight);
    $modal.css("height", `calc(100vh - ${headerHeight}px)`);
  };

  const makeModal = () => {
    const activeClassName = "modal--open";

    const open = (e) => {
      e.preventDefault();
      adjustModalStyles();
      $modal.addClass(activeClassName);
      $body.css("overflow", "hidden");

      $window.on("resize", adjustModalStyles);
    };

    const close = (e) => {
      e.preventDefault();
      $modal.removeClass(activeClassName);
      $body.css("overflow", "auto");

      $window.off("resize", adjustModalStyles);
    };

    $open.on("click", open);
    $close.on("click", close);
  };

  makeModal();
});