레이어팝업-위치조정-초점처리for웹접근성

$('.layer_open').click(function(){
    var el = $(this);
    $('.layer_popup').show();
    $('.dim').show();
    el.attr('data-focus','on'); // 레이어 팝업이 닫힐 때를 위한 표시 - 웹접근성
 
    /* modalPopup팝업 위치조정 */
    window.setTimeout(function(){
        var target = $("#layerPopup");
        var win_height = $(window).height();
        var pop_height = target.height();
        var top_value = $(window).scrollTop() + (win_height - pop_height) /2;
        target.attr("tabindex","0");
        target.show().css("top",top_value);
        target.focus();
    },500);// ajax 팝업을 고려한 딜레이 추가
    /* [end]: modalPopup팝업 위치조정 */
});

$('.layer_close').click(function(){
    $('.layer_popup').hide();
    $('.dim').hide();
    $("a[data-focus~=on]").focus(); // 표시해둔 곳으로 초점 이동
    window.setTimeout(function(){
        $("a[data-focus~=on]").removeAttr("data-focus");
    },500); // 역할을 다하고 필요없어진 표시 삭제
});

 

출처: https://gutmate.tistory.com/entry/레이어팝업-위치조정-초점처리for웹접근성 [프프프]