타닥타닥 개발자의 일상

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">&times;</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();
  }
});

 

 

실제화면. modal 클래스가 hidden된 상태
modal class를 클릭해 hidden이 사라진 화면. overlay클래스에서도 hidden이 사라진 상태.

 

'코딩 기록 > 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
'코딩 기록/JavaScript' Related Articles more
Comments