20180808 / 디지텍 / 레이어 팝업 심화

Native Javascript Layer Popup

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        * {margin: 0;padding: 0;}
        ul, li { list-style: none }
        .layer { display:none; justify-content:center; align-items:center; position:absolute;
                 left:0; right:0; top:0; bottom:0; background:rgba(0, 0, 0, 0.5);}
        .layer.active { display:flex; }
        .layer > div { background:#FFF; position:relative; }
        .layer_close { position: absolute; right:0; top:0; background:#09F; color:#FFF; padding:5px 10px;}
    </style>
    <script type="text/javascript">
        var sel = document.querySelectorAll.bind(document)
        window.onload = function () {
            sel('.layer_opener').forEach(function (target) {
                target.addEventListener('click', function () {
                    var obj = target.nextElementSibling
                    obj.className = 'layer active'
                })
            })
            sel('.layer_close').forEach(function (target) {
                target.addEventListener('click', function () {
                    target
                    .parentElement
                    .parentElement.className = 'layer'
                })
            })
        }
    </script>
</head>
<body>
    <ul>
        <li>
            <a href="#" class="layer_opener">레이어 1</a>
            <div class="layer">
                <div>
                    <a href="#" class="layer_close">X</a>
                    <div>
                        <p>레이어 팝업1 입니다.</p>
                        <p>레이어 팝업1 입니다.</p>
                        <p>레이어 팝업1 입니다.</p>
                    </div>
                </div>
            </div>
        </li>
        <li>
            <a href="#" class="layer_opener">레이어 2</a>
            <div class="layer">
                <div>
                    <a href="#" class="layer_close">X</a>
                    <div>
                        <p>레이어 팝업2 입니다.</p>
                        <p>레이어 팝업2 입니다.</p>
                        <p>레이어 팝업2 입니다.</p>
                    </div>
                </div>
            </div>
        </li>
        <li>
            <a href="#" class="layer_opener">레이어 3</a>
            <div class="layer">
                <div>
                    <a href="#" class="layer_close">X</a>
                    <div>
                        <p>레이어 팝업3 입니다.</p>
                        <p>레이어 팝업3 입니다.</p>
                        <p>레이어 팝업3 입니다.</p>
                    </div>
                </div>
            </div>
        </li>
    </ul>
</body>
</html>

 

JQuery Layer Popup

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        * {margin: 0;padding: 0;}
        ul, li { list-style: none }
        .layer { display:none; justify-content:center; align-items:center; position:absolute;
                 left:0; right:0; top:0; bottom:0; background:rgba(0, 0, 0, 0.5);}
        .layer.active { display:flex; }
        .layer > div { background:#FFF; position:relative; }
        .layer_close { position: absolute; right:0; top:0; background:#09F; color:#FFF; padding:5px 10px;}
    </style>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        var pos = 0
        $(document).on('click', '.layer_opener', function () {
            $(".layer.active").addClass('active')
            $(this).next('.layer').addClass('active')
            pos = $(this).index()
        })
        $(document).on('click', '.layer_close', function () {
            $('.layer').removeClass('active')
        })
        $(document).on('keyup', function (e) {
            console.log(e.keyCode)
            switch (e.keyCode) {
                case 27 :  /* esc key */
                    $(".layer").removeClass('active')
                break;
                case 37 :  /* left key*/
                    if(--pos < 0) pos = $(".layer").length - 1
                    $(".layer").removeClass('active')
                    $(".layer").eq(pos).addClass('active')
                break;
                case 39 :  /* right key */
                    if(++pos >= $(".layer").length) pos = 0
                    $(".layer").removeClass('active')
                    $(".layer").eq(pos).addClass('active')
                break;
            }
        })
    </script>
</head>
<body>
    <ul>
        <li>
            <a href="#" class="layer_opener">레이어 1</a>
            <div class="layer">
                <div>
                    <a href="#" class="layer_close">X</a>
                    <div>
                        <p>레이어 팝업1 입니다.</p>
                        <p>레이어 팝업1 입니다.</p>
                        <p>레이어 팝업1 입니다.</p>
                    </div>
                </div>
            </div>
        </li>
        <li>
            <a href="#" class="layer_opener">레이어 2</a>
            <div class="layer">
                <div>
                    <a href="#" class="layer_close">X</a>
                    <div>
                        <p>레이어 팝업2 입니다.</p>
                        <p>레이어 팝업2 입니다.</p>
                        <p>레이어 팝업2 입니다.</p>
                    </div>
                </div>
            </div>
        </li>
        <li>
            <a href="#" class="layer_opener">레이어 3</a>
            <div class="layer">
                <div>
                    <a href="#" class="layer_close">X</a>
                    <div>
                        <p>레이어 팝업3 입니다.</p>
                        <p>레이어 팝업3 입니다.</p>
                        <p>레이어 팝업3 입니다.</p>
                    </div>
                </div>
            </div>
        </li>
    </ul>
</body>
</html>