지난 포스팅에서는 모달팝업(레이어팝업)을 다뤘었다.


모달(레이어) 팝업 : http://wishml.tistory.com/45


이번에 다룰 팝업은 잠깐 언급했었던 window.open() 을 이용한 팝업이다.



사실 이 방법은 필자는 별로 좋아하지 않는다. 왜냐하면 팝업이 차단되면 팝업창을 사용할 수 없기 때문이다.


그래도 알아두면 좋으니 계속 이어나가겠다.


이 방법은 '일반 페이지 + 팝업창 갯수' 만큼의 파일을 필요로 한다.


A 페이지와 B 페이지가 있다고 했을 때, A는 부모창, B는 자식창(팝업창) 이라고 생각하면 될 것 같다.


이번에도 역시 닫기 버튼이 있으며 오늘 하루 이 창 열지 않음 버튼을 클릭시 쿠키가 생성 및 유지되어 열리지 않는다.


window_popup_ex.zip




window.open()을 이용한 팝업을 이용할 경우 브라우저에서 팝업을 차단했을 때 열리지 않는다.


window.open 팝업 : http://wishml.tistory.com/46


그래서 요즘은 모달(레이어)팝업 이라고 하는 것을 많이 쓰는데 사용 방법을 공유하겠다.


여기서 사용하는 것은 html, css, javascript 그리고 jquery와 쿠키유지를 하기 위해서 제이쿼리 플러그인 중에서 쿠키 플러그인을 사용하겠다.




팝업창이 이렇게 있을 때 닫기버튼을 누르면 팝업창이 사라지고, 

'오늘 하루 이 창 열지 않음' 버튼을 클릭하면 하루동안 쿠키가 유지되어 팝업창이 나타나지 않는다.


예제를 통해 직접 다뤄볼 수 있도록 파일을 첨부했으며 조금만 수정하면 실제 사이트에서 바로 적용이 가능하다.


popup_ex.zip


+ Recent posts