[javaScript] click 요소 data value로 popup창 띄우기

클릭한 요소의 데이터 값 가져와서 팝업 띄우기

 

 

HTML

<!-- button -->
<button type="button" class="btn_pop" data-target="pop_01">팝업열기</button>
<!-- // button -->

<!-- popup -->
<div id="dim"></div>
<div class="pop_container" id="pop_01">
    <!-- popup head -->
    <div class="pop_head">
        <strong class="pop_tit">팝업 제목</strong>
        <a href="#n" class="btn_pop_close" title="팝업 닫기">
            <img src="./img/ico_close.png" alt="">
        </a>
    </div>
    <!-- // popup head -->

    <!-- popup contents -->
    <div class="pop_contents">
    	팝업 내용
    </div>
    <!-- // popup contents -->
</div>
<!-- // popup -->

 

CSS

/* common */
html, body{margin: 0;padding: 0;}

/* popup */
#dim{display: none;position: fixed;top: 0;left: 0;z-index: 1;width: 100%;height: 100%;background-color: rgba(0,0,0,0.5);}
.pop_container{display: none;position: fixed;left: 50%;top: 50%;-webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%); z-index: 2;width: 90%;max-width: 500px;background-color: #fff;}
.pop_head{display: flex;justify-content: space-between;padding: 10px;background-color: #eee;}
.pop_head .pop_tit{font-size: 16px;font-weight: 700;}
.pop_contents{padding: 20px;}

 

javaScript

var dim = document.getElementById('dim');
var btnPop = document.querySelector('.btn_pop');
var btnPopClose = document.querySelector('.btn_pop_close');
var popUp = document.querySelector('.pop_container');

// popup open
btnPop.addEventListener('click', function(e){
    var crtData = e.currentTarget.dataset.target;
    var crtPop = document.querySelector('#' + crtData);
    dim.style.display = 'block';
    crtPop.style.display = 'block';
});

// popup close
btnPopClose.addEventListener('click', function(){
    dim.style.display = 'none';
    popUp.style.display = 'none';
})