layer popup Drag & Drop jquery draggable

요즘은 일반적인 팝업창을 기본으로 차단 하기 때문에 레이어팝업(모달팝업)을 일반 팝업 처럼 만들어 보았다.

 

 

1. jquery를 사용 하기 위해 head에 아래 스크립트 삽입.

<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

2. html 소스

JSTL을 사용 하여 팝업에표시할 내용이 들어있는 리스트를 돌면서 html을 리스트만큼 만든다.

참고로 id="multiLayer" div가 모든 팝업을 감싸고있는 tag이기 때문에...style 속성을 다음과 같이 해줘야

원하는 위치에 팝업 창을 띄울 수 있다.

style="z-index: 100;position: absolute; width: -webkit-fill-available;"

		<div class="" id="multiLayer" style="z-index: 100;position: absolute; width: -webkit-fill-available;">
			<c:forEach var="poplist" items="${popUpList}" varStatus="status">
			<div class="  js_pop" id="popid_${poplist.ap_code}" style="display: none;">
				<div style="background: lightgray; 
				    top: ${poplist.ap_location_y}px;
				    left: ${poplist.ap_location_x}px;
				    position: absolute;
				    width:auto;
				    heigth: 800px;				    
 					">
			        <div class="close">
			            <form method="post" action="" name="pop_form">
			                <span ><input id="popCheck${poplist.ap_code}" type="checkbox" value="checkbox"/><label for="chkday">하루동안 보지 않기</label></span>
			                <span class="icon-close" style="cursor: pointer;" onclick="closePopup(${poplist.ap_code})"></span>
			            </form>
			        </div>
			        <div class="cont">
			            <a href="${poplist.ap_link_url}" target="_blank">
			            	<img style="height: 100%; width: 100%" src="${imgPath}/adImg/popup/${poplist.ap_code}/${poplist.ap_image}" usemap="#pop" />
			            </a>
			        </div>
			        <div class="close">
			            <form method="post" action="" name="pop_form">
			                <span ><input id="popCheck${poplist.ap_code}" type="checkbox" value="checkbox"/><label for="chkday">하루동안 보지 않기</label></span>
			                <span class="icon-close" style="cursor: pointer;" onclick="closePopup(${poplist.ap_code})"></span>
			            </form>
			        </div>
				</div>
			</div>		  
			</c:forEach>
		</div>

3. 팝업기능 스크립트

<script>
$(document).ready(function(){

	/*-자동팝업 초기 로딩 기능*/
	//쿠키데이터 가져오기
	var cookiedata = document.cookie;
	// 브라우저 가로폭 사이즈 가져오기
	//var winwidth=document.all?document.body.clientWidth:window.innerWidth;

	/* 쿠키데이터로 팝업 컨트롤 
	 * JSTL 을 사용 하여 팝업정보가 담긴 리스트 돌며 key가되는 값을 참조하여
	 * 해당Key로 생성된 ID에 해당하는 팝업을 띄우고 이때 팝업을 띄우는 조건으로 
	 * 하루숨김 값이 저장된 쿠키데이터를 참조한다.
	 */
	<c:forEach items="${popUpList}" var="item">
		//alert("${item.ap_code}");
	    if(cookiedata.indexOf("close_${item.ap_code}=Y")<0){
	    	$("#popid_${item.ap_code}").draggable();//레이어 팝업 Drag & Drop 설정
	    	$("#popid_${item.ap_code}").show();
	    }else{
	        $("#popid_${item.ap_code}").hide();
	        //$("#pop").show();
	    }
	</c:forEach>
	/*자동팝업 끝*/
    
});

//자동팝업 내부기능
function closePopup(ap_code){//팝업 닫기
	 if($("#popCheck"+ap_code).is(":checked") == true){
	     setCookie("close_"+ap_code,"Y",1);   //기간( ex. 1은 하루, 7은 일주일)
	 }
	 $("#popid_"+ap_code).hide();
	
}
var getCookie = function (cname) {//쿠키 가져오기
	 var name = cname + "=";
	 var ca = document.cookie.split(';');
	 for(var i=0; i<ca.length; i++) {
	     var c = ca[i];
	     while (c.charAt(0)==' ') c = c.substring(1);
	     if (c.indexOf(name) != -1) return c.substring(name.length,c.length);
	 }
	 return "";
}
  
var setCookie = function (cname, cvalue, exdays) {//24시간 기준 쿠키 설정하기
	 var todayDate = new Date();
	 todayDate.setTime(todayDate.getTime() + (exdays*24*60*60*1000));    
	 var expires = "expires=" + todayDate.toUTCString(); // UTC기준의 시간에 exdays인자로 받은 값에 의해서 cookie가 설정 됩니다.
	 document.cookie = cname + "=" + cvalue + "; " + expires;
}

var couponClose = function(){
	 if($("input[name='chkbox']").is(":checked") == true){
	     setCookie("close","Y",1);   //기간( ex. 1은 하루, 7은 일주일)
	 }
	 $("#pop").hide();
}
/*자동팝업 내부기능 끝*/
</script>

참고: jquery .draggable()의 옵션 

테스트 단계에서 레이어 팝업창을 한쪽 방향으로 계속 드레그할 경우 (예: 오른쪽으로) 메인화면의 오른쪽에

빈여백에 계속 생기면서 레이어 팝업창이 무한대로 이동을 했다.......

하여 .draggable()의 옵션관련 구글링과 여러가지 테스트를 거처 해결 방법을 찾았다. 

아래와 같이 scroll:false 옵션을 주면 드래그앤드롭 이벤트가 모니터 화면 영역을 벗어나지 않게 설정 할 수 있었다...

하지만 전체 화면이 아닌 브라우저에서는 모니터 영역보다 브라우저 화면이 작기 때문에 기존처럼 우측에 여백이 생긴다...

	    	$("#popid_${item.ap_code}").draggable({
	    		scroll: false,
	    		//containment : [0,0,1024,1024]
	    	});

참고자료: https://www.pureexample.com/jquery-ui/draggable-containment.html