[jQuery] 접근성 레이어 팝업 - Shift

옛날에 접근성 레이어 팝업에 관한 고민을 한적이 있는데
그 이후로 많은 시간이 흘렀다.

그때 해당 코드는 shift에 관한 고민이 없었던 부분들이 있어서
조금 정리한 내용을 남겨 보려 한다.

써놓고 또 많이 안쓸수도 있지만...
언젠가 다시 또 개선할 날이 오겠지....




HTML :
<a class="layerOpen" data-layer-open="layer1" href="javascript:layerOpen('layer1');">열기1</a>
<a class="layerOpen" data-layer-open="layer2" href="javascript:layerOpen('layer2');">열기2</a>

<div class="layerWrap" id="layer1">
<h2>1</h2>
123123123<br />
<a class="" href="https://www.blogger.com/blogger.g?blogID=1953128756353565733#">123123</a><br />
123123123<br />
123123123<br />
<a class="" href="https://www.blogger.com/blogger.g?blogID=1953128756353565733#">123123</a><br />
123123123<br />
123123123<br />
123123123<br />
<a class="btn-layer-close" href="https://www.blogger.com/blogger.g?blogID=1953128756353565733#">닫기</a>
</div>
<div class="layerWrap" id="layer2">
<h2>
2</h2>
123123123<br />
<a class="" href="https://www.blogger.com/blogger.g?blogID=1953128756353565733#">123123</a><br />
123123123<br />
123123123<br />
<a class="" href="https://www.blogger.com/blogger.g?blogID=1953128756353565733#">123123</a><br />
123123123<br />
123123123<br />
123123123<br />
<a class="btn-layer-close" href="https://www.blogger.com/blogger.g?blogID=1953128756353565733#">닫기</a>
</div>

CSS :
.layerWrap{display:none;}

JS :
function layerOpen(elm){
    var btnOpen = $(document).find('[data-layer-open="'+elm+'"]');
    var _elm = $('#' + elm);
    var _btnClose = _elm.find('.btn-layer-close'); 

    _elm.attr('tabindex', '0').show().focus();
    $(document).on('keydown', '.btn-layer-close', function(e) {
        var isShift = window.event.shiftKey ? true : false;
        if (isShift &amp;&amp; (e.keyCode == 9)) {
            return;
        } else if (event.keyCode == 9) {
            _elm.focus();
            return false;
        }
    });
    _btnClose.on('click', function(){
        _elm.hide();
        btnOpen.focus();
    }); 
};