[JS] Modal 만들기

[요구사항] 

버튼을 클릭했을 때 모달창을 띄우기

 

<div class="box">
	<h1>Modal Project</h1>
	<button>OPEN MODAL</button>
</div>
<div class="modal hidden">
	<h1>Modal Content</h1>
    <span class="material-symbols-outlined close">close</span>
</div>

 

모달을 띄우기 전 박스에서 버튼을 만들고 버튼을 누르면 모달이 등장한다.

display:none;으로 설정해 둔 hidden클래스를 두어 자바스크립트에서 컨트롤할 수 있도록 한다

 

const button = document.querySelector('button')
const body = document.querySelector('body')
const modal = document.querySelector('.modal')
const box = document.querySelector('.box')
const close = document.querySelector('.close')

function onClickButton(){
  body.style.backgroundColor = '#69b8f14c'
  modal.classList.toggle('hidden')
}
function onClickClose(){
  modal.classList.add('hidden')
  body.style.backgroundColor = '#f1f9ff'
  body.style.opacity = '1'
}
close.addEventListener('click', onClickClose)
button.addEventListener('click', onClickButton)

버튼을 클릭하면 모달창이 뜨고 'X'버튼을 누르면 모달창이 꺼지도록 구현하였다.

hidden 클래스를 toggle하여 자연스럽게 동작하도록 만들었다.