2022. 5. 23. 12:04ㆍjQuery
HTML
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>jQuery Cookie라는 기능을 이용하여 하루만 혹은 기간을 정하여 모달창을 띄울 수 있다.
jQuery기능을 기본적으로 사용하기에 jQuery도 로드해야 한다.
<body onload="noScroll();">
<section id="popup" class="popup_js">
<div class="event">
<div>
<a href="javascript:;" class="btnTodayHide_js">오늘 그만 보기</a>
<a href="javascript:;" class="btnClose_js"><img src="./image/main_popEvent_close.png" alt="팝업닫기"></a>
</div>
<a href="#"><img src="./oneday.png" alt="하루만보기"></a>
</div>
</section>
</body>원하는 모달을 마크업 한다.
구현하고자 하는 기능은 화면이 처음 로딩됐을 때 모달이 뜨며 스크롤이 안돼게 고정시키는 것(클릭 등은 모달의 반투명 배경으로 자연스럽게 막힘)
body영역에 스크롤을 막을 함수를 onload를 사용하여 불러와준다.
클릭(a링크)했을 때 상단으로 올라가지 않도록 javascript:; 입력
onload 참고페이지
https://itworldyo.tistory.com/101
href="" 참고 페이지
https://minimal-dev.tistory.com/28
a href="#", void(0) 의 의미 차이점
⚓ #, javascript:, void(0); 차이점 이 글은 anchor tag의 href 속성만 다룹니다. 링크로 이동시켜주는 앵커태그의 href 속성은 작성된 value값으로 이동시켜주는 HTML태그입니다. 간단하게 속성 살펴보기 URL
minimal-dev.tistory.com
CSS
#popup {
display: none;
}매번 뜨는 모달창이라면 모달 영역을 항상 띄우겠지만 하루만 띄우는 등의 조건을 줄 경우 스크립트로 출력유무를 제어하기 때문에 display:none;을 부여함.
JS
const $popup = document.querySelector('.popup_js');
const $btnPopClose = document.querySelector('#popup .btnClose_js');
const $btnPopupTodayHide = document.querySelector('#popup .btnTodayHide_js');
const $body = document.querySelector('body');
// 최초 팝업 노출 (oneDay라는 이름의 쿠키가 존재하지 않으면 팝업 노출)
if (!$.cookie('oneDay')) {
layerPopupShow();
}
// 팝업 닫기버튼
$btnPopClose.addEventListener('click', function () {
layerPopupHide(0);
});
// 팝업 오늘 그만 보기 버튼
$btnPopupTodayHide.addEventListener('click', function () {
layerPopupHide(1);
});
// 팝업노출, 스크롤 막기 함수
function layerPopupShow() {
$popup.style.display = 'block';
$body.style.overflow = 'hidden';
}
// 팝업 비노출 함수
function layerPopupHide(state) {
// 닫기, 오늘그만보기 버튼 무관하게 일단 닫고 body의 스크롤 막힘을 제거.
$popup.style.display = 'none';
$body.style.overflow = 'auto';
// 오늘그만보기 버튼을 누른 경우
if (state === 1) {
// oneDay라는 이름의 쿠키가 있는지 체크
if ($.cookie('oneDay') == undefined) {
// 쿠키가 없는 경우 oneDay쿠키를 추가하고 값에 임의로 Y라는 값을 넣어줌
$.cookie('oneDay', 'Y', {
// 쿠키 유지 시간(즉, 팝업이 안보길 기간 설정. 이 기간이 지나면 쿠키가 삭제됨)
expires: 1,
// 전체사이트 적용 (특정 페이지만 적용 시 해당 페이지 경로 작성)
path: '/'
});
}
}
}oneDay, Y 등 쿠키의 이름과 값은 다른 값을 넣어도 된다
혹시라도 맨 처음부터 body의 스크롤을 막고싶다면 아래의 방법을 사용하면 된다
<body onload="noScroll();">
<div>내용</div>
</body>
<script>
function noScroll(){
$('body').css({"overflow":"hidden"});
}
</script>
스크롤 막기 참고 사이트
https://aboooks.tistory.com/84
참고사이트
'jQuery' 카테고리의 다른 글
| jQuery)쿠키를 사용하여 하루만 뜨는 모달창 만들기2 (+체크박스) (0) | 2022.11.03 |
|---|---|
| jQuery 최신 버전 cdn (0) | 2022.08.29 |
| 반응형 동영상 + 동영상의 높이 값에 따라 바뀌는 header css (0) | 2022.05.03 |
| 클릭한 요소만 css 요소를 추가하는 방법 (.find()) + 클릭했을 때 특정 요소만 보여지기 (0) | 2022.04.20 |
| slideToggle 중복실행 시 (0) | 2022.04.07 |