[자바스크립트] 모달창

<h1>모달창 만들기</h1>

<button id="open">모달창 열기</button>

<div class="modal hidden">
 <div class="md_overlay"></div>

 <div class="md_content">
  <h1>샘플 모달창</h1>
  <div class="modal_text">자바스크립트로 모달창을 만들어 봤습니다.</div>
<button>X</button>
 </div>

</div>

 

button{
background-color: #990000;
color: white;
padding: 15px 25px;
border-radius: 6px;
cursor: pointer;
}
.modal{
position: fixed;
top: 0; left: 0;
width: 100%; height: 100%;
display: flex;
justify-content: center;
align-items : center;
}
.md_overlay{
background-color: rgba(0, 0, 0, 0.6);
width: 100%; height: 100%;
position: absolute;
}
.md_content{
width:20%; 
position:relative; 
padding:50px 100px; 
background-colr:#fff; 
text-align:center; 
border-radius: 6px;
}
h1{margin:0; padding:5px;}
.hidden{ display:none;}
.modal_text{font-size:16px;}

 

//필요한 엘리먼트들을 선택한다.
const openBtn = document.getElementById('open');
const modal = document.querySelector('.modal');
const overlay = modal.querySelector('.md_overlay');
const closeBtn = modal.querySelector('button');


//동작 함수

const openModal = () =>{
modal.classList.remove('hidden');
}
const closeModal = () =>{
modal.classList.add('hidden');
}

//클릭이벤트

openBtn.addEventListener('click', openModal);
closeBtn.addEventListener('click', closeModal);