반응형
1. HTML 작성
<body>
<!-- modal 여는 버튼 -->
<button id="open">Open Modal</button>
<!-- modal -->
<div class="modal hidden">
<!-- modal이 열리면 뒤 배경이 됨 -->
<div class="modal__background"></div>
<!-- modal 내용이 들어갈 창 -->
<div class="modal__content">
<h1>Modal title</h1>
<div>Modal content<br />
Modal content<br />
Modal content<br />
Modal content
</div>
<!-- modal 닫는 버튼 -->
<button id="close">close</button>
</div>
</div>
2. CSS 작성
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}
button {
/* button의 기본 디자인을 reset */
all: unset;
font-size: 20px;
background-color: teal;
color: white;
padding: 5px 10px;
border-radius: 5px;
cursor: pointer;
}
.modal {
/* 스크롤이 위아래로 이동해도 자리에 고정*/
position: fixed;
/* 고정될 자리 */
/* 위에서 0만큼 떨어진 위치 */
top: 0;
/* 왼쪽에서 0만큼 떨어진 위치 */
left: 0;
/* 모달이 열리면 전체 화면을 차지함 */
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.modal__background {
background-color: rgba(0, 0, 0, 0.6);
width: 100%;
height: 100%;
position: absolute;
}
.modal__content {
background-color: white;
padding: 50px 50px;
text-align: center;
position: relative;
border-radius: 10px;
/* https://codepen.io/sdthornton/pen/wBZdXq - 박스 디자인 */
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19),
0 6px 6px rgba(0, 0, 0, 0.23);
}
h1 {
margin: 0;
}
.hidden {
/* 모달에 작성한 class로 기본은 안보이게 지정 */
display: none;
}
3. JavaScript 작성
<script>
// modal
const modal = document.querySelector(".modal");
// modal 여는 버튼
const openBtn = document.getElementById("open");
// modal이 열리기 위해 hidden이라는 클래스를 삭제 - disply:none;이 적용되지 않음
const openModal = () => {
modal.classList.remove("hidden");
};
// click event 적용
openBtn.addEventListener("click", openModal);
// modal 닫는 버튼
const closeBtn = document.getElementById("close");
// modal이 닫히기 위해 hidden이라는 클래스를 추가 - disply:none;이 적용
const closeModal = () => {
modal.classList.add("hidden");
};
// click event 적용
background.addEventListener("click", closeModal);
// modal 배경
const background = document.querySelector(".modal__background");
// modal 배경을 클릭해도 modal이 사라지도록 함
closeBtn.addEventListener("click", closeModal);
querySelector()와 addEventListener 에 대한 상세 내용은 아래 게시글 참조
2021.09.13 - [JavaScript] - [JavaScript] click event 로 글자 색을 번갈아가며 변경하는 3가지 방법
[JavaScript] click event 로 글자 색을 번갈아가며 변경하는 3가지 방법
div.hello 태그 내부에 h1태그가 있음 Click me!! JavaScript에서 querySelector()를 이용해 h1태그를 반환 const h1Tag = document.querySelector("div.hello:first-child h1"); addEventListener()메서드로 clic..
wheneveryouwantsz.tistory.com
'JavaScript' 카테고리의 다른 글
| [JavaScript] onclick() 이벤트로 매개변수 전달 (0) | 2021.10.17 |
|---|---|
| [JavaScript] 정규표현식 (0) | 2021.10.14 |
| [JavaScript] click event 로 글자 색을 번갈아가며 변경하는 3가지 방법 (0) | 2021.09.13 |
| [Spring] Eclipse Spring Legacy Project 세팅 (0) | 2021.09.06 |
| [JavaScript] 프로토타입을 활용한 상속 (0) | 2021.09.05 |
