layer

by Park Mino

HTML

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

<br><br><br><br><br>
<div class="layerWrap" id="layer1">
    <h2>1</h2>
    <p>123123123</p>
    <p><a href="#" class="">123123</a></p>
    <p>123123123</p>
    <p>123123123</p>
    <p><a href="#" class="">123123</a></p>
    <p>123123123</p>
    <p>123123123</p>
    <p>123123123</p>
    <a href="#" class="btn-layer-close">닫기</a>
</div>
<div class="layerWrap" id="layer2">
    <h2>2</h2>
    <p>123123123</p>
    <p><a href="#" class="">123123</a></p>
    <p>123123123</p>
    <p>123123123</p>
    <p><a href="#" class="">123123</a></p>
    <p>123123123</p>
    <p>123123123</p>
    <p>123123123</p>
    <a href="#" class="btn-layer-close">닫기</a>
</div>

CSS

.layerWrap{display:none;}

JavaScript

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 && (e.keyCode == 9)) {
            return;
        } else if (event.keyCode == 9) {
            _elm.focus();
            return false;
        }
    });
    _btnClose.on('click', function(){
        _elm.hide();
        btnOpen.focus();
    });    
};