아주아주 간단한 팝업 닫기 또는 감추기용 스크립트

간단히 공지 팝업을 만들 일이 생겼습니다. 페이지 내에 레이어 형태로 넣어서 닫기 버튼만 넣어주면 되는, 아주아주 단순한 팝업이었지요. '더 이상 보지않음' 이라던가 '오늘 하루 보지않음' 등은 필요도 없었습니다. 이런 타입은 쿠키를 써야 해서 살짝 복잡한 느낌인데, 아무튼 그런거 없이 그냥 '닫기'만 있으면 되는 경우였죠.

레이어야 CSS로 띄워서 위치만 잡아주면 되니 상관없고... 닫기 버튼을 어떻게 할까 고민하다가 그냥 display:none 해버리기로 했습니다. 사실 고민까진 아니고 그냥 정말정말 초 간단한 거니까... 이렇게 하기로 했죠.

근데 이거 하나 하자고 jQuery 불러서 로딩하고 클릭이벤트 걸고... 그렇게까지 할 필요 있나 싶었습니다. 찾아보니 아주 간단한 방법이 있더군요.

onclick="this.parentNode.parentNode.style.display = 'none'"

간단히 a태그에 요렇게 넣어줘서 해결. parentNode가 두 개인 이유는 레이어 - 버튼위치잡기용div - a태그 순으로 구조를 만들어놔서 그렇습니다. 만약 레이어 div 안에 바로 a태그가 있으면 parentNode를 하나만 넣어줘도 되겠죠. 크롬에서도 잘 되고 IE에서도 별 문제 없는거 같아 그냥 이걸로 OK.

11월의 첫 포스팅을 이렇게 짧은 메모 몇 줄로 시작합니다.

예제용 팝업의 내용
닫기