DOM 기초 모달창 만들기
모달창 혹은 팝업창을 만드는 방법은 매우 다양하지만 대부분 비슷한 방법을 사용합니다.
- 보통의 모달창은 하나의 화면을 전체적으로 사용하면서 정보를 사용자에게 제공합니다.
- 외부의 여백을 클릭하면 모달창이 닫힙니다.
html
<body>
<button id="open">
Modal Open
</button>
<div class="modal-container">
<div class="modal">
<h1>Modal</h1>
<p>Lorem ipsum dolor.....</p>
</div>
</div>
<script src="js/modal.js"></script>
</body>css
.modal-container {
position: fixed;
top: 0;
left: 0;
height: 100vh;
width: 100vw;
background-color: rgba(0, 0, 0, 0.3);
display: none;
align-items: center;
justify-content: center;
}
.modal-container.show {
display: flex;
}버튼 및 텍스트를 꾸며주는 css를 제외하고 중요한건 모달창의 속성이 display: none에서 show라는 클레스가 추가되면 display 속성을 변경해주는 방법입니다.
js
const open = document.querySelector('#open');
const modalContainer = document.querySelector('.modal-container');
const openModal = () => {
modalContainer.classList.add('show');
}
const closeModal = (event) => {
if(event.target === modalContainer) {
modalContainer.classList.remove('show');
}
}
open.addEventListener("click", openModal);
window.addEventListener("click", closeModal);많은 방법이 있지만
css를 이용해서 모달의 open/close를 미리 설정하고 해당하는css를 추가/삭제하는 방법이 가장 기본적인 방법으로 사용됩니다.
여백 클릭시 모달창이 닫혀야하기 때문에 event.target을 사용해서 여백부분을 클릭하게 되면 모달을 보여주는 css를 삭제하는 방법입니다.
둡둡