HTML/CSS/JS 모달창(Modal Window) 구현

특정 버튼을 클릭했을 때 모달창을 띄울 것이다. 

 

 

▪ 기본 버튼 만들기

<button>모달창 열려랏!</button>

 

 

▪ 기본 모달창 만들기

 

CSS

<style>
            #modal.modal-overlay {
                width: 100%;
                height: 100%;
                position: absolute;
                left: 0;
                top: 0;
                display: none;
                align-items: center;
                justify-content: center;
                background: rgba(71, 58, 58, 0.25);     
            }
            #modal .modal-window {
                background: rgba(84, 93, 99, 0.7);      
                width: 400px;
                height: 200px;
                position: relative; 
            }
            
            #modal .title {
                padding-left: 10px;
                display: inline;
                color: white;
                
            }
            #modal .title h2 {
                display: inline;
            }
            #modal .close-area {
                display: inline;
                float: right;
                padding-right: 10px;
                cursor: pointer;
                color: white;
            }
            
            #modal .content {
                margin-top: 20px;
                padding: 0px 10px;
                color: white;
            }


        </style>

HTML

<div>
            <button id="btn-modal">모달창 열려랏!</button>
        </div>


        <div id="modal" class="modal-overlay">
            <div class="modal-window">
                <div class="title">
                    <h2>제목</h2>
                </div>
                <div class="close-area">X</div>
                <div class="content">
                    <p>안녕하세요</p>
                    <p>이건 모달창이에요</p>
            
                </div>
            </div>
        </div>

JS

 <script>
        const modal=document.getElementById("modal")
        function modalOn(){
            modal.style.display="flex"

        }
        function isModalOn(){
            return modal.style.display === "flex"
        }
        function modalOff() {
            modal.style.display = "none"
        }
        const btnModal = document.getElementById("btn-modal")

        btnModal.addEventListener("click", e => {
                modalOn()
            })

    </script>

 

- 모달창 주변을 어둡게, "X"버튼을 눌렀을 때 창이 닫히도록 만들었다.

- 처음 만든 버튼의 id를 "btn-modal"로 설정하고, JS에서 이 버튼을 클릭했을 때 설정한 함수를 실행하도록getElementById("btn-modal") 을 사용했다.

- modal-overlay의 스타일을 "display: none"을 설정하면 처음에 창이 보이지 않고, 버튼을 클릭했을 때 창이 뜨도록 JS에서 버튼 클릭시 "flex"를 설정했다.

 

결과: