안녕하세요
이번 시간에는 모달창을 만들고, 모달창 외부를 클릭하면 모달창이 안 보이게 하는 기능을 만들어보겠습니다.
* 결과
* 전체 코드입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>stickcode_modal</title>
<style>
.modal_wrap {
width: 500px;
height: 500px;
position: absolute;
border: 2px solid black;
top:50%;
left: 50%;
margin: -250px 0 0 -250px;
background:#eee;
z-index: 2;
display : none;
}
.modal_wrap.show-modal {
display: block;
}
.modal_background.show-modal {
display: block;
}
.modal_background {
position: absolute;
width: 100%;
height: 100%;
background-color:rgba(0, 0,0, 0.5);
top:0;
left: 0;
z-index: 1;
display : none;
}
.modal_close {
width: 26px;
height: 26px;
position: absolute;
top: 10px;
right: 10px;
}
.modal_wrap .text {
margin-top: 45px;
margin-left: 5px;
}
.modal_close .closeImg {
display: block;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<button type='button' id="modal_btn">모달창 키기</button>
<div class="modal_background"></div>
<div class="modal_wrap">
<div class="modal_close">x</div>
<div class="text">
스틱코드에서 개발에 필요한 모든 코드를 쉽게 사용하세요.
https://stickode.com/mainlogin.html
</div>
</div>
</body>
<script>
'use strict';
const modal_wrap = document.querySelector('.modal_wrap')
const modal_background = document.querySelector('.modal_background')
//Show modal
document.querySelector('#modal_btn').addEventListener('click', () => {
open()
})
//Hide modal
document.querySelector('.modal_close').addEventListener('click', () => {
close()
})
//Hide modal
window.addEventListener('click', (e) => {
e.target === modal_background ? close() : false
})
function close(){
modal_wrap.classList.remove('show-modal');
modal_background.classList.remove('show-modal');
}
function open(){
modal_wrap.classList.add('show-modal')
modal_background.classList.add('show-modal')
}
</script>
</html>
모달창을 보이게 하는 css 속성과 보이지 않게 하는 css 속성을 작성합니다.
* 모달창을 보이게 하는 css 속성은 display : block; 입니다.
* 모달창을 보이지 않게 하는 css 속성은 display : none; 입니다.
.modal_wrap {
display: none;
//생략
}
.modal_wrap.show-modal {
display: block;
}
.modal_background.show-modal {
display: block;
}
.modal_background {
display: none;
//생략
}
- 모달창 키기 버튼을 클릭하면 모달창을 볼 수 있습니다. ( display : block 상태 추가 )
- 모달창 안의 x 버튼이나 모달창 외부를 클릭한다면 모달창을 볼 수 없습니다. ( display : none 상태 )
const modal_wrap = document.querySelector('.modal_wrap')
const modal_background = document.querySelector('.modal_background')
//Show modal
document.querySelector('#modal_btn').addEventListener('click', () => {
open()
})
//Hide modal
document.querySelector('.modal_close').addEventListener('click', () => {
close()
})
//Hide modal
window.addEventListener('click', (e) => {
e.target === modal_background ? close() : false
})
function close(){
modal_wrap.classList.remove('show-modal');
modal_background.classList.remove('show-modal');
}
function open(){
modal_wrap.classList.add('show-modal')
modal_background.classList.add('show-modal')
}'JavaScript' 카테고리의 다른 글
| [Javascript] 네이버 지도 api를 사용해서 지도 표시 및 마커 찍기 (2) | 2022.07.06 |
|---|---|
| [JavaScript] Full-calendar 커스텀하기 (0) | 2022.07.01 |
| [Javascript] Video.js 사용해서 동영상 재생하기 (0) | 2022.06.23 |
| [Javascript] filter 함수 사용하기 (0) | 2022.06.21 |
| [JavaScript] Full-calendar 사용하기 (0) | 2022.06.16 |
