레이어팝업 포커싱

문제 상황 : 

- 클릭시 오픈된 레이어 팝업으로 키보드 포커싱이 이동하지 않고, 팝업 닫기 후 기존 페이지로 포커싱 이동이 안됨

    → 레이어 팝업 활성화 시, 키보드는 레이어 안으로 반드시 이동해야 함

"a태그"와 "레이어 팝업"

1) 키보드 초점을 순서대로 옮겨지도록 팝업 오픈 버튼(앵커 태그) 클릭 후 레이어가 열리는 순간 초점을 레이어로 옮기기(타겟 레이어에 tabindex=0 사용)

2) 레이어팝업 안에서 초점이 순서대로 이동해야 하며, 레이어의 상태를 display:block으로 만들어 준다.

3) 레이어 팝업을 닫으면, 초점은 레이어 팝업을 열었던 곳으로 이동해야한다.

HTML

<ul class="list">
   <li>
      <a href="#target" title="새창열림">레이어팝업!</a>
    </li>
</ul>
<!-- startup popup -->
<div class="popbg" style="display:none"></div>
<div class="popup" style="display:none" id="target">
    <h4><span class="hide">내용</span></h4>
    <p class="tit-home"><a href="#none" target="_blank" title="새창열기"><span class="hide">홈페이지</span></a></p>
    <p class="tit-mail"><a href="#none" title="아웃룩 메일 새창 열기"><span class="hide">대표메일</span></a></p>
    <a href="#none" class="close_popup" title="팝업닫기">Close</a>
</div>
<!-- // startup popup -->
 

js

$(document).ready(function(){
    var listBtn = $('.list > li > a');
    $(listBtn).click(function(){
    var $self = $(this);
    var $target = $($(this).attr('href'));                    
    $target.attr('tabindex', '0').show().focus();
    $('.bg-pop').show();
        $target.find(".close_popup, .popup-close").click(function(){
            $target.hide();
            $('.bg-pop').hide();
            $self.focus();
            $(this).off('click');
        });
    }); //팝업 포커싱 
});
 

>>>> a태그의 href 속성을 이용하여 포커싱 옮기기

예시 - https://jsfiddle.net/jywoo/qc0p0kh4/17

★ 버튼 여러개 + 레이어팝업1개(로드되는 팝업일때, n:1) v.1 - https://codepen.io/anon/pen/qgGDa

★ 버튼 여러개 + 레이어팝업1개(로드되는 팝업일때, n:1) v.2 - https://codepen.io/anon/pen/oqLFx

☆★ 버튼 여러개 + 레이어팝업 여러개(1:1) - https://codepen.io/anon/pen/Dpaxj