[팝업 연동/오늘하루 열지않기]홈페이지 팝업 - 모바일 팝업 연동 / 오늘하루 열지않기

모달팝업창 예시

PC <-> 모바일 사이트 모달팝업 연동 및 오늘하루 열지않기/쿠키설정

PC사이트와 모바일사이트 두가지가 있다. 비슷하지만 조금씩 코드가 다르고 연동이안되는것도 많고, PC에는 있는데 모바일에는 없는 기능이나 페이지가 엄청많다 ㅡ,.ㅡ
관리자페이지에서 모달팝업 설정을 해주면, 모달 설정이 자동으로 되어 창이 띄워지는데 이 부분을 가져오는 PC 로직을 모바일 로직으로 조금 변경하여 적용하였다.
CSS와 JQuery도 물논 가져왔다.
가져올 필요는 없지만 왜 가져왔는지는....ㅎ코드를보면 나온다...ㅎ

반응형 모달팝업창 style

<style>
	.noticePop {position:absolute; top:140px; left:48px; z-index:10000; border:5px solid #7346a9; width:316px; max-width:90%; max-height:100%; background:#fff; box-shadow:0 0 30px rgba(0,0,0,0.4); box-sizing:border-box}
	.noticePop > .inBox {overflow:hidden}
	.noticePop > .inBox .popForm {overflow:hidden; padding:15px 20px; background:#373a5b}
	.noticePop > .inBox .popForm * {line-height:20px; font-size:16px; color:#fff; font-weight:500}
	.noticePop > .inBox .popForm div {float:left}
	.noticePop > .inBox .popForm a {float:right}
	.noticePop > .inBox .bannerSwiper img {display:block; vertical-align:top}
	.noticePop.on {transform:scale(1); -webkit-transform:scale(1); -moz-transform:scale(1)}
	.noticePop > .inBox .bannerSwiper .swiper-button-next,
	.noticePop > .inBox .bannerSwiper .swiper-button-prev {position:absolute; top:50%; width:40px; height:40px; margin-top:-20px; box-shadow:0 0 10px rgba(0,0,0,0.2); background-color:rgba(255,255,255,0.7) !important}
	.noticePop > .inBox .bannerSwiper .swiper-button-prev {left:0; background:url("https://fanfandaero.kr/portal/images/main_2022/product_slider_prev.png") no-repeat center}
	.noticePop > .inBox .bannerSwiper .swiper-button-next {right:0; background:url("https://fanfandaero.kr/portal/images/main_2022/product_slider_next.png") no-repeat center}
    	 @media (max-width:750px) {    
     		.noticePop {top:20%; left:8%}    
    	}    
    	 @media (max-width:350px) {   
     		.noticePop {top:50%; left:50%; transform:translate(-50%, -50%) scale(0); max-width:95%; max-height:95%; -webkit-transform:translate(-50%, -50%) scale(0); -moz-tansform:translate(-50%, -50%) scale(0); transition:all 0.2s; -webkit-transition:all 0.2s; -moz-transition:all 0.2s}   
     		.noticePop.on {transform:translate(-50%, -50%) scale(1); -webkit-transform:translate(-50%, -50%) scale(1); -moz-tansform:translate(-50%, -50%) scale(1); transition:all 0.2s; -webkit-transition:all 0.2s; -moz-transition:all 0.2s}   
     		.noticePop > .inBox .popForm {padding:10px 15px}    
     		.noticePop > .inBox .popForm {font-size:14px}     
     	}    
	
</style>

/* noticePop : 모달팝업창. 반응형으로 제작되어있다.
swiper-button : 모달창의 버튼 < >, 누르면 넘어가는 효과.

<div class="noticePop"> /*팝업 모달창의 뼈대*/ 
<div class="inBox">
	<!-- bannerSwiper -->
	<div class="bannerSwiper">
		<div class="swiper-wrapper">
			<c:forEach var="winPop" items="${mainModalList}">
				<c:forEach var="fileVO" items="${winPop.imageFileList}"> /* item을 리스트로 받아옴*/
					<c:if test="${winPop.clCode == ConstantsCode.POPUP_BANNER_MODAL_POPUP}"> /* 코드번호도 팝업종류에 따라 받아옴. (관리자페이지에 따른 조건임..*/
						<a href="javascript: void(0);" class="swiper-slide" urlPath="${winPop.popupInfoVO.urlPath}" nttId="${winPop.popupInfoVO.nttId}" etc="${winPop.popupInfoVO.etc }">/*nntID는 공지사항번호, etc는 그외*/
							<img src="/download.do?fileName=${fn:replace(fn:replace(fileVO.fileStreCours,'\\\\','/'), 'C:/gfsdata/imstars/upload', '')}" alt="">
						</a>
					</c:if>
				</c:forEach>
			</c:forEach>
		</div>
        /*버튼 부분*/
		<div class="swiper-button-next"></div>
		<div class="swiper-button-prev"></div>
	</div>
	<!--// bannerSwiper -->
   
   /*오늘은 그만보기, 닫기부분*/
	<form class="popForm">
		<div>
			<input type="checkbox" name="todayPop" id="todayPop" onclick="closePop();">
			<label for="todayPop">오늘은 그만보기</label>
		</div>
		<a href="javascript:void(0);" onclick="fn_selfClose(this)">닫기</a>
	</form>
</div>
</div>
                
                

    // 홈페이지 팝업과 모바일 팝업도 연동 

	$(function(){
		openModalPop(); /* 페이지 실행시 팝업창오픈. */
		modalSwipe(); /*팝업창 오픈실행 후 swipe실행*/
	
		// 모달팝업창 이미지 클릭 시 실행 부분
		$(".noticePop").find(".swiper-wrapper").find("img").on("click", function(){
			var urlPath = $(this).parent().attr("urlPath");
			var nttId = $(this).parent().attr("nttId"); //공지사항
			var etc = $(this).parent().attr("etc"); //기타페이지

			if( etc == 'Y' ){
				fn_otherSite(urlPath, etc);
			} else {
				if( nttId ){
					fn_banner("type01", "", nttId, "", "", "");
				} else {
					urlPath = urlPath.split("/")[2];
					location.href = "http://localhost:8080/mobile/" + urlPath;
				}
			}
		})
		//cookie값이 있을 경우 modal창이 떠서, cookie값이 있을 때 hide처리.
			var cookie = getCookie("main_modal");
			if( cookie ){
				$(".noticePop").hide();
			}
	});

//쿠키 값 셋팅
	function setCookie(cookie_name, value, hr) {
	   var exdate = new Date();
	   exdate.setTime(exdate.getTime() + hr*60*60*1000);
		
	  var cookie_value = escape(value) + ((hr == null) ? '' : ';    expires=' + exdate.toUTCString());
	  document.cookie = cookie_name + '=' + cookie_value + ';path=/';
	}
	
	function getCookie(name) {
	  var value = document.cookie.match('(^|;) ?' + name + '=([^;]*)(;|$)');
	  return value? value[2] : null;
	};


	//list만큼 창을 보여줌.
	function openModalPop(){
		var modalLength = "${mainModalList.size()}";
	
    	//0이면 띄우지 않음.
		if( modalLength == 0 ) return;
		
        //쿠키값을 받아와서 모달을 띄우는 부분
		var cookie = getCookie("main_modal");
		if( !cookie ){
			fn_openMmodal();
		}
	}
	
	function modalSwipe(){
		var modalLength = "${mainModalList.size()}";

		var bannerSwiper = new Swiper(".bannerSwiper", {
			autoplay: {
				delay: 4000,
			},
			loop:true,
			navigation: {
			  nextEl: ".swiper-button-next",
			  prevEl: ".swiper-button-prev",
			},
		});

		// 팝업내용이 1개면 자동넘기기 멈춤
		if(modalLength == 1){
			bannerSwiper.autoplay.stop();
		}
	}
    //Modal 열기
	function fn_openMmodal(){
		$(".noticePop").addClass("on");
	}//css코드가 필요한부분이다. addclass로 on을넣어주면 그때 css가 붙고, 밑에서 removeclass로 on을 떼서 창을 없앤다. 이런방식으로 구현되어있어서 style코드까지 다 봤어야했다 ㅡㅡ
    
	
	//Modal 닫기
	function fn_closeModal(){
		$(".noticePop").removeClass("on").fadeOut(200);
	}
	
    //오늘만 닫기 버튼
	function closePop(){
		if($('#todayPop').is(':checked')){
			setCookie("main_modal", 'modal', 1);
			fn_closeModal();
		}
	}
    

배운점 : 쿠키셋팅, 개발자모드에서 쿠키보는법, 가져오고 삭제하는법
split을 사용하여 역순으로 주소를 조회하여 모바일/PC 상관없이 적용시키기.

팝업창을 누르면 공지사항이나 기타페이지로 이동시키는 부분은 연동이 되었는데, 문제점이 있었다.
관리자페이지에서 배너를 타고 바로가기를 지정해주면 경로가 들어가지는데, portal기준으로 올리기때문에 mobile은 따로 처리를 해주어야한다.
그러면 Urlpath부분을 바꾸어주어야하기때문에 Spilit으로 짤라서 가져온다.
local일 경우는 "http://localhost:8080/mobile/"를 가져오고 그 뒤에 주소를 붙히도록..

urlPath = urlPath.split("/")[2]; // portal로 들어온 부분은 mobile로 바꿔준다.
이 소스는 urlPath = "/portal/aboutImstarsBI.do"; urlPath가 요런식으로 들어왔을때 2개를 짜를 수 있는데, 만약에 다른방식으로 들어오면은 주소가 꼬여버리지않을까?
근데 ㅇㅇ맞다고하셨음 그럼 split으로 짤라서, 마지막부분만 가져오게하면 될 것 같다.

console.log(urlPath.split("/")); -> 콘솔찍어봄.

urlPath = urlPath.split("/").reverse()[0];
역순으로 출력.
맨뒤에꺼 가져오니까 대씀.ㅇㅇ