자바스크립트

modal popup 구현

avocado12 2021. 9. 6. 09:25

순수 자바스크립트로 modal popup을 구현해보려고 합니다.

 

기능 요구사항

1. "open modal" 버튼을 누르면 팝업이 뜬다.

2. "X" 버튼을 누르면 팝업이 닫힌다.

3. 팝업 이외 부분을 누르면 닫힌다.

4. 팝업 안을 눌렀을 때 닫히면 안된다.

 

index.html 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">    
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="./style.css">
</head>
<body>
    
  <!-- body overlay -->
  <div class="body-blackout"></div>

  <!-- Modals Triggers -->
  <a
    type="button"
    class="btn btn-sm btn-primary popup-trigger">
    open modal
  </a>


  <!-- Modals -->
  <div 
    class="popup-modal shadow" 
    data-popup-modal="one">
    <i class="fa fa-window-close popup-modal__close"></i>
    <h1 class="font-weight-bold">
      팝업 제목
    </h1>
    <div>
      팝업 내용 123 <br />
      팝업 내용 123 <br />
      팝업 내용 123 <br />
      팝업 내용 123 <br />
      팝업 내용 123
    </div>

  </div>


<script src="./index.js"></script>
</body>
</html>

.body-blackout은 모달 바탕화면이고, modal보다 z-index가 낮게 만들 예정이다.

즉, .body-blackout 위로 modal을 띄운다.

 

style.css

 html {
	 box-sizing: border-box;
}
 *, *:before, *:after {
	 box-sizing: inherit;
}
 html, body {
	 font-family: 'Open Sans', sans-serif;
	 padding: 0;
	 margin: 0;
}
 body {
	 background-color: #f6f6f6;
	 min-height: 100vh;
	 height: 100vh;
	 padding: 35px;
	 position: relative;
}
 a {
	 text-decoration: none;
	 color: inherit;
}
 .body-blackout {
	 position: absolute;
	 z-index: 1010;
	 left: 0;
	 top: 0;
	 width: 100%;
	 height: 100%;
	 background-color: rgba(0, 0, 0, .65);
	 display: none;
}
 .body-blackout.is-blacked-out {
	 display: block;
}
 .popup-trigger {
	 display: inline-block;
}
 .popup-modal {
	 height: 365px;
	 width: 650px;
	 background-color: #fff;
	 position: absolute;
	 left: 50%;
	 top: 50%;
	 transform: translate(-50%, -50%);
	 padding: 45px;
	 opacity: 0;
	 pointer-events: none;

	 z-index: 1011;
}
 .popup-modal.is--visible {
	 opacity: 1;
	 pointer-events: auto;
}
 .popup-modal__close {
	 position: absolute;
	 font-size: 5rem;
	 right: -10px;
	 top: -10px;
	 cursor: pointer;
}

 

index.js

document.addEventListener("DOMContentLoaded", ( ) => {
  const bodyBlackout = document.querySelector('.body-blackout')
  const popupModal = document.querySelector('.popup-modal')

  document.querySelector('popup-trigger').addEventListener("click", ( ) => {
    popupModal.classList.add('is--visible')
    bodyBlackout.classList.add('is-blacked-out')
  });

  popupModal.addEventListener("click", ( ) => {
    popupModal.classList.remove('is--visible')
    bodyBlackout.classList.remove('is-blacked-out')
  });

  bodyBlackout.addEventListener("click", ( ) => {
    popupModal.classList.remove('is--visible')
    bodyBlackout.classList.remove('is-blacked-out')
  });
});