레이어팝업 웹접근성 포커스 이동

1. 버튼 클릭했을때 레이어팝업 가져오기

2. 닫기를 눌렀을때 포커스를 클릭한 버튼으로 이동

3. 딤 눌렀을때 닫힘

 

* 제이쿼리

See the Pen 레이어팝업 by uni (@agosto) on CodePen.

* 자바스크립트

See the Pen 레이어팝업 javascript by uni (@agosto) on CodePen.

이 코드는 jQuery를 사용하지 않고 순수 자바스크립트를 사용하여 동일한 기능을 구현합니다. 주요 변경 사항은 다음과 같습니다:

• $("id")  => document.getElementById를 사용하여 요소를 선택합니다.
• document.createElement를 사용하여 새로운 요소를 만듭니다.
• element.style.display를 사용하여 요소의 표시 상태를 변경합니다.
• element.setAttribute를 사용하여 속성을 설정합니다.
• element.addEventListener를 사용하여 이벤트 리스너를 추가합니다.
• addClass("on"), removeClass("on") =>  element.classList.add와 element.classList.remove를 사용하여 클래스 목록을 수정합니다.
• document.querySelector와 document.querySelectorAll를 사용하여 요소를 선택합니다.