(javascript) 2개 이상의 팝업창 : 닫기, 오늘더이상안보기

 

ㅈㄱㄴ

가보자고

 

<div id="popup">

	<!-- 팝업 1 -->
    <div class="pop_item pop01">
    	<div class="pop_cont">
        	<div style="width:300px; height:340px; background:pink;">123</div>
        </div>
        <div class="pop_btns">
        	<button type="button" class="close_btn_24">오늘 더이상 보지 않기</button>
            <button type="button" class="close_btn">닫기</button>
        </div>
    </div>
    
    <!-- 팝업 2 -->
    <div class="pop_item pop02">
    	<div class="pop_cont">
        	<div style="width:320px; height:380px; background:skyblue;">abc</div>
        </div>
        <div class="pop_btns">
        	<button type="button" class="close_btn_24">오늘 더이상 보지 않기</button>
            <button type="button" class="close_btn">닫기</button>
        </div>
    </div>
    
</div>

팝업 마크업을 해주긔

(들여쓰기 라인 왜 저따구로 나와..?)

 

//CSS
* {margin: 0; padding: 0; box-sizing: border-box; line-height: 1; font-size: 12px;}
html, body {width: 100%;}
button {cursor: pointer;}

#popup {width: 100%; height: 0;}
.pop_item {border: 1px solid black; position: fixed; top: 15px; z-index: 999;}
.pop_item.hidden {opacity: 0; pointer-events: none;}
.pop01 {left: 10px;}
.pop02 {left: 320px;}
.pop_btns {background: #000; display: flex; justify-content: space-between; padding: 5px;}
.pop_btns button {background: #ddd; padding: 5px 10px;}

간단하게 CSS를 입혀준다

 

const popup = document.querySelectorAll(".pop_item");

popup.forEach((e, index) => {
	const $close = e.querySelector(".close_btn");
    const $close24 = e.querySelector(".close_btn_24");
	const popupName = "popup" + index;

	function closePopup(bool) {
		if (bool === true) {
 			e.remove();
 		}
	}

	function on_close_popup24() {
		setCookie(popupName, "done", 1);
		closePopup(true);
	}
	function on_close_popup() {
		closePopup(true);
	}

	function setCookie(name, value, expiredays) {
		let today = new Date();
		today.setDate(today.getDate() + expiredays);
		
        document.cookie = name + "=" + escape(value) + "; path=/; expires=" + today.toGMTString() + ";";
	}

	function getCookie() {
		const cookieData = document.cookie;
		console.log(cookieData);
		if (cookieData.indexOf(`${popupName}=done`) < 0) {
			closePopup(false);
		} else {
 			closePopup(true);
		}
	}


	getCookie();
    $close.addEventListener("click", on_close_popup); //닫기버튼
    $close24.addEventListener("click", on_close_popup24); //24시간닫기버튼
});

(또! 또! 들여쓰기 저따구로 !!)

 

forEach 로 각 팝업창 내 버튼으로 각 함수를 실행하고

버튼 두개 다, 눌렀을 때 해당 팝업창을 지워짐.

새로고침 했을 시 "닫기"버튼을 눌렀다면 팝업창 다시 뜸.

근데 on_close_popup24 함수를 실행하게 되면

오늘(today) 23시59분59초까지 팝업창이 지워져 안 뜸

 

결과

https://4v3tjf.csb.app/

Static Template

 

forEach를 쓰게 되니 하게 되는 것도 많아지고 마음이 너무 편-안-☆

 

오늘도 즐코 👻

 

 

 

참고글

https://aosceno.tistory.com/646

[JS]바닐라 자바스크립트로 24시간 쿠키 모달 끄기/켜기 설정하기