0songha0

이미지 모달 팝업 및 일주일 간 보지 않기 기능 개발

이미지 모달 팝업 개발

모달 팝업 HTML

<div class="dim" id="mainModalDim"></div>
<div id="mainModalPop">
  <div id="mainModalInner" role="document">
    <div id="mainModalContent">
      <div id="mainModalImgWrap">
        <div id="mainModalTopBar">
          <label id="mainModalWeekLabel" for="mainModalWeekChk">
            <input type="checkbox" id="mainModalWeekChk">
            <span id="mainModalChkIcon"><svg width="12" height="10" viewBox="0 0 12 10"><polyline points="1.5,5 4.5,8 10.5,1.5" fill="none" stroke="#333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></span>
            일주일 간 보지 않기
          </label>
          <button type="button" id="mainModalClose">&#10005;</button>
        </div>
        <a href="https://www.tsherpa.co.kr/center/M-noticM-view.html?id=2749157&categoryId=521296&pageIndex=1&modelId=notice" target="_blank">
          <img id="mainModalImg" src="${imWebStatic}/images/main/modal/mainModalImg01.png" alt="공지사항">
        </a>
      </div>
    </div>
  </div>
</div>

dim 영역 및 이미지 모달 팝업 HTML을 작성합니다.

모달 팝업 CSS

#mainModalDim { display: none; z-index: 21; }
#mainModalPop { display: none; position: fixed; z-index: 22; left: 0; top: 0; width: 100%; height: 100%; overflow-y: auto; }
#mainModalPop #mainModalInner { position: relative; z-index: 22; top: 50%; margin: 0 auto; transform: translateY(-50%); }
#mainModalPop #mainModalContent { background: transparent; padding: 0; text-align: center; position: relative; height: auto !important; width: auto !important; }
#mainModalPop #mainModalImgWrap { display: inline-block; position: relative; }
#mainModalPop #mainModalTopBar { display: flex; justify-content: flex-end; align-items: center; gap: 10px; padding: 0 0 8px 0; }
#mainModalPop #mainModalWeekLabel { display: flex; align-items: center; gap: 6px; cursor: pointer; color: #fff; font-size: 15px; -webkit-user-select: none; user-select: none; }
#mainModalPop #mainModalWeekChk { display: none; }
#mainModalPop #mainModalChkIcon { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border: 2px solid #fff; border-radius: 3px; background: transparent; flex-shrink: 0; transition: background .15s; box-sizing: border-box; }
#mainModalPop #mainModalChkIcon svg { opacity: 0; transition: opacity .15s; }
#mainModalPop #mainModalClose { background: none; border: none; color: #fff; font-size: 24px; font-weight: bold; cursor: pointer; line-height: 1; }
#mainModalPop #mainModalImg { max-width: 100%; cursor: pointer; border-radius: 10px; display: block; }

/* 모바일 반응형 CSS */
@media screen and (min-width: 1024px) {
  #mainModalPop #mainModalInner { max-width: 600px; }
}
@media screen and (max-width: 1023px) {
  #mainModalPop #mainModalInner { padding: 0 20px; box-sizing: border-box; width: 100%; }
}

dim 영역 및 이미지 모달 팝업에 입힐 CSS 스타일을 작성합니다.

모달 팝업 관련 스크립트

<script>
  $(document).ready(function(){
    // 쿠키 확인 후 모달 팝업 노출
    if (document.cookie.indexOf('mainModalHideWeek=Y') === -1) {
      $('#mainModalDim').show();
      $('#mainModalPop').show();
    }

    // '일주일 간 보지 않기' 체크박스 토글 이벤트
    $('#mainModalWeekChk').on('change', function(){
      var $icon = $('#mainModalChkIcon');
      if ($(this).is(':checked')) {
        $icon.css('background', '#fff').find('svg').css('opacity', '1');
      } else {
        $icon.css('background', 'transparent').find('svg').css('opacity', '0');
      }
    });

    // 닫기 버튼 클릭 이벤트
    $('#mainModalClose').on('click', function(){
      // '일주일 간 보지 않기' 체크 시 7일 뒤 만료되는 쿠키 저장
      if ($('#mainModalWeekChk').is(':checked')) {
        var expires = new Date();
        expires.setDate(expires.getDate() + 7);
        document.cookie = 'mainModalHideWeek=Y; path=/; expires=' + expires.toUTCString();
      }

      $('#mainModalDim').hide();
      $('#mainModalPop').hide();
    });

    // dim 클릭 시 닫기
    $('#mainModalDim').on('click', function(){
      $('#mainModalClose').trigger('click');
    });
  });
</script>

페이지 진입 시, ‘일주일 간 보지 않기’ 여부를 쿠키로 체크 후 모달 팝업을 노출합니다.

최신 글