Modal

open 버튼 클릭 시 모달 열기 -> 모달 부분 제외하고 오버레이, 닫기 버튼 클릭 시 모달 닫기

---

HTML

<h1>Modal</h1>
    <button id="btn">Open</button>

    <div id="overlay" class="hidden">
        <div id="center">
            <h1>Heading</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
                Veritatis eius voluptatum eaque, nemo impedit esse pariatur dolore sint labore maiores minus atque voluptas, 
                fuga possimus ratione beatae provident facilis consectetur.
            </p>
        </div>

        <button id="close-btn" class="hidden">x</button>
    </div>

CSS

    <style>
       #overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0 0 0/ 0.2);
        }
        #overlay.hidden {
            display: none;
        }
        #center {
            background-color: pink;
            border-radius: 1rem;
            max-width: 20rem;
            padding: 0.5rem;
            margin: 10rem auto;
        }
        #close-btn {
            float: right;
            font-size: 28px;
            color: white;
            background-color: transparent;
            border: none;
            padding: 2rem;
            position: fixed;
            top: 8px;
            right: 16px;
        }
        #close-btn.hidden {
            display: none;
        }
    </style>

JS

<script>
        var closeBtn = document.getElementById("close-btn");
        var btn = document.getElementById("btn");
        var overlay = document.getElementById("overlay");


        console.log(closeBtn)
        console.log(btn)
    
        //open버튼 클릭하면 Heading 부분 뜸
        btn.addEventListener('click', (e) => {
            overlay.classList.remove('hidden');
            closeBtn.classList.remove('hidden');
        })

        
        // 빈 부분 누르면 오버레이 나가짐
        overlay.addEventListener('click', (e) => {
            
            console.log(e.target)

            // x버튼 눌렀을 때 나가짐
            if (e.target == closeBtn) {
                overlay.classList.add('hidden')
            }

            // 오버레이 눌렀을 때 나가짐
            if (e.target == overlay) {
                overlay.classList.add('hidden')
            }
        })
        
    </script>

---

classList 생성

• classList는 element의 읽기전용 속성으로 css class의 현재 값을 반환
• DOMTokenList 객체로 element의 class 속성을 보여줌

ex 1) info class를 id가 content인 div element에 추가하는 코드

let div = document.querySelector('#content');
div.classList.add('info');

ex 2) element의 class 목록에 여려개의 css class를 추가하는 코드

let div = document.querySelector('#content');
div.classList.add('info', 'visible', 'block');

---

classList 삭제

• remove()
• add() -> remove와 같은 클래스 사용 시

// 한 개만 삭제
let div = document.querySelector('#content');
div.classList.remove('visible');

// 여러 개 삭제
let div = document.querySelector('#content');
div.classList.remove('block', 'red');

---

classList 교체

• replace()

let div = document.querySelector('#content');
div.classList.replace('info','warning');

---

classList 토글

• toggle()

let div = document.querySelector('#content');
div.classList.toggle('visible');