[CSS/JAVASCRIPT]간단한 팝업창(모달창) 만들기

간단한 팝업창(모달창)을 만들어 보려고 합니다.

먼저 완성 된 모습!

아래의 '모달창아 나와랏'버튼을 눌려봐주세용!

close

모달창 내용

버튼을 누르면 팝업창을 띄고 뒷배경을 전체 깔아줘서 다른부분이 클릭 되지 않게 하고, 팝업창을 더 잘보이게 합니다.

HTML

<button type='button' id="modal_btn">모달창아 나와랏</button>
<div class="black_bg"></div>
<div class="modal_wrap">
    <div class="modal_close"><a href="#">close</a></div>
    <div>
        모달창 내용
    </div>
<div>

1. 버튼을 하나 만들어줍니다. (팝업창을 띄워줄) (id="modal_btn")

2. 팝업창이 띄워졌을때 전체 배경으로 들어갈 DIV를 만들어 줍니다. ( class= "back_bg")

3. 내용이 들어갈 팝업창 박스를 만들어주고 close버튼도 만들어 줍니다. ( class = "modal_wrap")

CSS

.modal_wrap{
        display: none;
        width: 500px;
        height: 500px;
        position: absolute;
        top:50%;
        left: 50%;
        margin: -250px 0 0 -250px;
        background:#eee;
        z-index: 2;
    }
    .black_bg{
        display: none;
        position: absolute;
        content: "";
        width: 100%;
        height: 100%;
        background-color:rgba(0, 0,0, 0.5);
        top:0;
        left: 0;
        z-index: 1;
    }
    .modal_close{
        width: 26px;
        height: 26px;
        position: absolute;
        top: -30px;
        right: 0;
    }
    .modal_close> a{
        display: block;
        width: 100%;
        height: 100%;
        background:url(https://img.icons8.com/metro/26/000000/close-window.png);
        text-indent: -9999px;
    }

1. 모달창(.modal_wrap)과 배경(.black_bg)를 둘다 사이즈를 지정해고 position:abosolute으로 띄어줍니다.

2. close버튼은 텍스트를 아이콘을 변경해줍니다. 

3. 모달창(.modal_wrap)과 배경(.black_bg)를 둘다 안보이게 해줍니다.( display:none;)

JAVA SCRIPT

<script>
    window.onload = function() {
 
    function onClick() {
        document.querySelector('.modal_wrap').style.display ='block';
        document.querySelector('.black_bg').style.display ='block';
    }   
    function offClick() {
        document.querySelector('.modal_wrap').style.display ='none';
        document.querySelector('.black_bg').style.display ='none';
    }
 
    document.getElementById('modal_btn').addEventListener('click', onClick);
    document.querySelector('.modal_close').addEventListener('click', offClick);
 
};
</script>

1. 안보이게 했던 모달창(.modal_wrap)과 배경(.black_bg)를 버튼을 클릭했을 때 보이게 해줍니다.

 - onClick 보이게 하는 함수 생성

 - offClick 안보이게 하는 함수 생성

 - 버튼 클릭시(#modal_btn) onClick를 작동하도록 함

2. .modal_close를 눌렀을때 다시 안보이게 해줍니다.

 - 버튼 클릭시(.modal_close) offClick를 작동하도록 함

문제가 있는 부분이 있으면 댓글 달아주시면 확인해볼께용!