팝업 띄우기

   팝업창 띄우기 vs 레이어 팝업   

홈페이지를 사용하다보면 새창으로 뜨는 팝업과 컨텐츠 내에서 뜨는 팝업이 따로 있다는 걸 알수있다. 

처음에 만들땐 두방법을 구분을 못해서 팝업띄워달란 얘길하면 무조건 새창으로 띄웠는데(ㅜㅜ 이제는 두가지 형식으로 팝업을 구분하고 사용할수있게되었다.

새창 팝업은 말그대로 새로운 브라우저 창으로 뜨는 팝업이라서 기본 웹브라우저에 팝업 차단기능이 있다면 사용자가 허용하지 않는 이상 팝업이 뜨지않는 경우가 있을 수 있다.  그래서 레이어 팝업을 써서 컨텐츠 내에서 숨겨진 내용을 팝업으로 띄우는 형식으로 사용한다!.

(1) 새창으로 띄운 팝업 

- 팝업주소만으로 주소창에서 접근이 가능하다. 단, 팝업 허용을 해야 새창 열림 가능! 

( 주소창에 팝업 주소를 넣으면 바로 접속 가능! )

( 브라우저에서 따로 팝업허용을 해줘야 팝업창이 열린다.)

**** 다만 이 방법을 메인페이지에 사용했을 경우, 아래 웹접근성 지침에 따르면 오류유형으로 분류된다. ********

8.1.1 사용자가 의도하지 않은 기능(초점 변화, 서식 전송, 새 창, 팝업, 레이어)이 실행된 곳은 없는가?

http://nuli.navercorp.com/sharing/a11y/checklist/8.1.1

위의 사이트에서 알수있 듯 "페이지에 접속하는 순간 새창이 뜨는 경우" 에는 사용자가 새로뜬 창의 정보를 알수가 없다.(초점이동불가)

만약 새로운 창을 열어야한다면 접속시 띄우면 안되고, 이벤트를 통해 충분한 안내(a target="blank" 등) 후 사용하면 된다.

팝업창 띄우기(새창)      자바스크립트를 사용해서 팝업창을 만듭니다. window.open() 메소드를 사용해서 html 파일을 열어줍니다.     중요한건 팝업 파일이 따로있는 상태(!)에서 팝업창으로 띄워주는겁니다.(본 사이트.html과 팝업.html 이 따로 열리는것!)

window.open() 메소드 설명 -> https://www.w3schools.com/jsref/met_win_open.asp

 window.open("파일명", "팝업이름", "옵션"); 

예)

window.onload =function () {
   window.open("popup. html",  "popup_1", "width=500, height=500");
}

(2) 레이어 팝업

- 숨겨진 내용을 현재 컨텐츠 위에 겹쳐서 보여주는(레이어형식) 팝업

- 단독으로 접근이 불가능하며 특정 이벤트(클릭 등)을 통해 확인이 가능하다.

닫기 버튼을 통해 레이어팝업을 화면에서 숨길 수 있다.

단, 레이어팝업 형식을 사용할때는 웹접근성 지침에 따라 포커싱 이동이 필요하다.

https://jsfiddle.net/jywoo/qc0p0kh4/9/