모달창이란?
컴퓨터 프로그램에서 사용되는 일종의 창으로, 사용자가 이 창을 닫기 전까지 다른 창과 상호작용할 수 없게 만듭니다. 일반적으로 중요한 정보를 표시하거나 사용자로부터 특정 입력을 받기 위해 사용됩니다. 예를 들어, 확인 대화 상자, 경고 메시지, 또는 로그인 창 등이 모달 창의 예입니다.
index.html
<body>
<!-- hero -->
<header class="hero">
<div class="banner">
<h1>modal project</h1>
<button class="btn modal-btn">
open modal
</button>
</div>
</header>
<!-- modal -->
<div class="modal-overlay">
<div class="modal-container">
<h3>modal content</h3>
<button class="close-btn"><i class="fas fa-times"></i></button>
</div>
</div>
<!-- javascript -->
<script src="app.js"></script>
</body>index에서 body에 해당하는 부분의 코드이다.
hero에 해당하는 부분은 모달 버튼을 눌러지기 이전의 기본 화면에 해당한다.
그리고 modal에 해당하는 부분이 버튼을 눌렀을 때 화면이 펼쳐 지는 부분이다.
JS
1. 선택자 입력
각각의 클래스에 선택자를 입력한다.
const modalBtn = document.querySelector(".modal-btn");
const modal = document.querySelector(".modal-overlay");
const closeBtn = document.querySelector(".close-btn");
2. 이벤트 할당
modalBtn.addEventListener("click", function () {
modal.classList.add("open-modal");
});
closeBtn.addEventListener("click", function () {
modal.classList.remove("open-modal");
});- modalBtn에 "click"이 발생하게 되면 modal의 클래스인 .open-modal이 추가되고
- closeBtn에 "click"이 발생하게 되면 제거된다
사실 버튼을 통해 창을 발생시키고 사라지게 하는 매우 간단한 실습이다.
'개발 > javascript' 카테고리의 다른 글
| [JS]날씨앱을 만들어 보자 (2) | 2024.09.04 |
|---|---|
| [JS]FAQ만들기 (0) | 2024.06.24 |
| [JS] 사이드 바 만들기 (1) | 2024.06.16 |
| [JS] 반응형 네비게이션바 (0) | 2024.06.09 |
| [JS] Review Carousel 리뷰캐러셀 (1) | 2024.06.08 |