[Javascript] js 버튼으로 팝업창 열고 닫기 제어

 js 버튼으로 팝업창 열고 닫기 제어

 

# html

<ul class="popup_area_fixed">
      <c:forEach var="popupinfo" items="${popupInfo}" varStatus="status">
            <li onclick="popon('popup_' + ${status.count});"><a href="javascript:">
                     ${popupinfo.TITLE}
            </a></li>
      </c:forEach>
 </ul>


<c:if test="${not empty popupInfo }">
	<div class="popup_area">
		<c:forEach var="popupinfo" items="${popupInfo}" varStatus="status">
			<div id="popup_${status.count}" class="layer_popup">
					${popupinfo.XSS_HCONTENT}
			  <div class="popup_btn">
			     <a onclick="closeWin('popup_${status.count}');" href="javascript:void(0);" class="close close_b" style="width:100%;">닫기</a>
			  </div>
			</div>
		</c:forEach>
	 </div>
</c:if>

 

# javascript

// 버튼 누르면 팝업창 켜짐  
   function popon(popid){
        $('#' + popid).addClass('on');
    }
   
// 팝업창 닫기
	function closeWin(popId) {
		$('#'+popId).removeClass('on');
	}

페이지 오른쪽에 팝업창이 파라미터로 불러온 타이틀로 버튼이 있고

버튼을 누르면 팝업창이 뜨는 로직입니다.

 

[닫기]를 눌렀을 때 팝업창 전체가 닫히는게 아니라

하나씩 닫히도록 <a onclick="closeWin('popup_${status.count}');">를 넣어주었습니다.

 

 

 

 

 

 화면

 

 

(스타일은 다른 곳에서 가져온 css파일 입니다)