Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | ||||
4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 | 26 | 27 | 28 | 29 | 30 | 31 |
Tags
- 구글맵스
- Hook
- npm
- 코틀린
- 안드로이드
- scrollview
- TextView
- Linux
- 오버라이딩
- nodejs
- Kotlin
- 리액트
- fragment
- 자바스크립트
- Java
- Javscript
- GoogleMaps
- React
- 스프링부트
- SpringBoot
- array
- JS
- 랜덤넘버
- Android
- JavaScript
- button
- TypeScript
- stylesheet
- RecyclerView
- 랜덤번호
Archives
- Today
- Total
타닥타닥 개발자의 일상
javascript / DOM 언어 eventListener 사용하여 JS 페이지에서 모달창 띄우기, esc키로 모달창 닫기, overlay로 모달창 이외 부분 어둡게하기 본문
코딩 기록/JavaScript
javascript / DOM 언어 eventListener 사용하여 JS 페이지에서 모달창 띄우기, esc키로 모달창 닫기, overlay로 모달창 이외 부분 어둡게하기
NomadHaven 2023. 1. 16. 22:54
JS와 연결된 HTML INDEX
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="style.css" />
<title>Modal window</title>
</head>
<body>
<button class="show-modal">Show modal 1</button>
<button class="show-modal">Show modal 2</button>
<button class="show-modal">Show modal 3</button>
//클래스 이름 옆에 hidden을 붙여 modal 클래스를 숨긴다.
<div class="modal hidden">
<button class="close-modal">×</button>
<h1>I'm a modal window 😍</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.
</p>
</div>
//클래스 이름 옆에 hidden을 붙여 overlay 클래스를 숨긴다.
<div class="overlay hidden"></div>
<script src="script.js"></script>
</body>
</html>
DOM 언어를 사용해서 HTML 페이지에 있는 Class를 Java Script와 연결하여 동적 페이지 만드는 방법.
1. HTML 페이지에 있는 클래스를 querySelector로 연결시킨다.
const modal = document.querySelector('.modal');
const overlay = document.querySelector('.overlay');
const btnCloseModal = document.querySelector('.close-modal');
const btnOpenModal = document.querySelectorAll('.show-modal');
2. 자주 쓰이는 기능을 파악하고 해당 기능에 대한 함수를 만든다. 해당 페이지에서는 열기/닫기 기능이 제일 많이 쓰이므로 열기/닫기 기능을 실행하는 JS 함수를 만든다.
//열기 함수
const openModal = function () {
console.log('Button clicked');
//class에 있는 hidden부분을 삭제하여 모달창을 연다
modal.classList.remove('hidden');
overlay.classList.remove('hidden');
};
//닫기함수
const closeModal = function () {
//class에 hidden을 추가하여 모달창을 숨긴다
modal.classList.add('hidden');
//모달창을 열면서 실행했던 overlay모드를 숨긴다.
overlay.classList.add('hidden');
};
3.addEventListener를 사용하여 모달창을 열고 닫을때의 이벤트를 연결시킨다.
//bntOpenModal은 여러개이므로 for 문을 돌려서 여러 버튼에 이벤트를 적용한다.
//openModal 함수를 사용하여 이벤트를 연결한다.
for (let i = 0; i < btnOpenModal.length; i++)
btnOpenModal[i].addEventListener('click', openModal);
//btnColseModal은 X모양 버튼 하나밖에 없다.
//해당 버튼에 closeModal함수를 사용하여 닫기 이벤트를 연결한다.
btnCloseModal.addEventListener('click', closeModal);
overlay.addEventListener('click', closeModal);
//openModal함수 closeModal 함수에 ()를 붙이지 않은 이유는
//해당함수가 클릭이벤트가 발생했을때만 실행되게 하기 위함이다.
4.ESC를 누를때 발생할 이벤트를 연결한다.
document.addEventListener('keydown', function (e) {
/*
keydown은 어떤 key를 눌러도 이벤트가 발생하게 하는 object다.
console.log('A key was pressed');
console.log(e); //매개 변수를 출력하면서 오브젝트를 확인할수 있다.
//KeyboardEvent {isTrusted: true, key: '7', code: 'Numpad7', location: 3, ctrlKey: false, …} 라는 오브젝트 확인
//닷워킹 통해서 key라는 오브젝트에 접근
console.log(e.key);
*/
console.log(e.key);
if (e.key === 'Escape' && !modal.classList.contains('hidden')) {
closeModal();
}
});
전체 자바스크립트
'use strict';
const modal = document.querySelector('.modal');
const overlay = document.querySelector('.overlay');
const btnCloseModal = document.querySelector('.close-modal');
const btnOpenModal = document.querySelectorAll('.show-modal');
const openModal = function () {
console.log('Button clicked');
modal.classList.remove('hidden');
overlay.classList.remove('hidden');
};
const closeModal = function () {
modal.classList.add('hidden');
overlay.classList.add('hidden');
};
for (let i = 0; i < btnOpenModal.length; i++)
btnOpenModal[i].addEventListener('click', openModal);
btnCloseModal.addEventListener('click', closeModal);
overlay.addEventListener('click', closeModal);
//모든 페이지에 적용되는 이벤트. 어떤 키를 눌러도 상관없이 콘솔창에 문구가 출력된다.
document.addEventListener('keydown', function (e) {
/*
console.log('A key was pressed');
console.log(e); //매개 변수를 출력하면서 오브젝트를 확인할수 있다.
//KeyboardEvent {isTrusted: true, key: '7', code: 'Numpad7', location: 3, ctrlKey: false, …} 라는 오브젝트 확인
//닷워킹 통해서 key라는 오브젝트에 접근
console.log(e.key);
*/
console.log(e.key);
if (e.key === 'Escape' && !modal.classList.contains('hidden')) {
closeModal();
}
});
'코딩 기록 > JavaScript' 카테고리의 다른 글
for of 배열에 entries 메서드 이용해서 인덱스까지 추가하여 출력하기 (0) | 2023.05.16 |
---|---|
Java Script / DOM 언어 querySelector, getElementById, addEventListner로 주사위 게임 만들기 classList.remove/classList.add (0) | 2023.01.30 |
배열을 받고 형식을 갖춘 문자로 출력하기 javascript JS (0) | 2022.12.06 |
자바스크립트 함수/배열 이용해서 배열에 원하는 값 저장하기 array (0) | 2022.11.16 |
자바 스크립트 if 조건문으로 함수 만들어서 원하는 결과 출력하기 (0) | 2022.11.16 |
Comments