모달 팝업 만들기 (240105 주의 사항 추가)

 

 

 

📒 모달과 팝업, 모달팝업?

퍼블리싱을 하다보면 모달과 팝업을 구현해야 할 경우가 많다.

현재는 모달과 팝업창을 특별히 구분하지않으며 함께 사용하여 모달팝업이라 부르기도 한다.

 

구분 시켜보자면,

모달은 사용자가 버튼을 클릭할 경우 뜨는 창을 말하며

 

팝업은 특정 페이지의 방문할 경우 즉시 뜨는 창을 뜻한다.

 

기상청 방문시, 현위치 확인을 위한 권한 요청 팝업

 

 

 

 

 

팝업창은 alert(), prompt(), confirm()  함수를 사용해 구현할 수도 있다.

• alert()은 단순 알림창이며 확인을 누르면 해당 창이 닫힌다.
• prompt()은 내용을 입력하는 팝업창이다.
• confirm()은 확인을 누르면 true값을 전달하고, 취소를 누르면 false값을 전달한다.

 

🔎 예시

alert('팝업창 입니다.')

 

* 참고로 필자는 크롬의 색상테마 사용중이라 기본 팝업창과 다른 스타일로 나타납니다.

 

prompt('성함을 작성해주세요','홍길동')
// prompt('성함을 작성해주세요') -> 기본값 설정없으면 입력값에 아무것도 없이 나옴

 

 

confirm('홍길동 본인이 맞습니까?')

 

 

 

 

---

 

 

 

🔎 예시 - Html

모달 경우 특정 라이브러리를 가져와 사용하기도 하지만

직접 만들기도 한다. 아래는 모달 예시이다.

일반적으로 많이 쓰이는 <div>가 아닌 <aside>를 사용했다.

 

  <div class="container">
    <button class="btn btn-modal">Open</button>
  </div>

  <aside class="modal-wrapper">
    <div class="modal-wrap">
      <div class="modal-head">
        <h2 class="modal-title">제목입니다.</h2>
        <button class="btn-close"></button>
      </div>
      <div class="modal-body">
        내용입니다.<br>
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit...</p>
      </div>
      <div class="modal-footer">
        <button class="btn btn-no">아니오</button>
        <button class="btn btn-yes">예</button>
      </div>
    </div>
  </aside>

 

 

 

🔎 예시 - Css

닫기 버튼의 아이콘은 주로 이미지를 사용한다.

하지만 conpen에서 이미지를 사용할 수 없어서 직접 그렸다.

 

body {
  text-align: center;
  background-color: #eee;
  font-size: 10px;
  position: relative;
  margin: 0;
}
h1 {
  padding-top: 10rem;
  font-size: 2rem;
  margin: 0;
  font-weight: 600;
}
.container {
  margin: 0 auto;
  max-width: 1200px;
  padding: 1rem;
}
.modal-wrapper {
  z-index: 99;
  background-color: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  display: none;
}
.modal-wrapper .modal-wrap {
  max-width: 960px;
  background-color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 999;
  width: 100%;
  box-shadow: 0px 1px 20px 10px #00000030;
  border-radius: 5px;
  text-align: left;
}
.modal-wrapper .modal-wrap .modal-head {
  border-bottom: 1px solid #ccc;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.modal-wrapper .modal-wrap .modal-head .modal-title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 600;
  padding: .75rem .75rem .75rem 1rem;
}
.modal-wrapper .modal-wrap .modal-head .btn-close {
  padding: 24.5px;
  background-color: #eee;
  border-left: 1px solid #ccc;
  border-top-right-radius: 5px;
  position: relative;
  cursor: pointer;
}
.modal-wrapper .modal-wrap .modal-head .btn-close:hover {
  background-color: #ccc;
}
.modal-wrapper .modal-wrap .modal-head .btn-close::after {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
  position: absolute;
  content: '';
  display: block;
  width: 20px;
  height: 2px;
  background-color: black;
}
.modal-wrapper .modal-wrap .modal-head .btn-close::before {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  position: absolute;
  content: '';
  display: block;
  width: 20px;
  height: 2px;
  background-color: black;
}
.modal-wrapper .modal-wrap .modal-body {
  padding: 1rem;
  font-size: 1rem;
  line-height: 1.5;
}
.modal-wrapper .modal-wrap .modal-body p {
  height: 1000px;
}
.modal-wrapper .modal-wrap .modal-footer {
  padding: 2rem 1rem;
  border-top: 1px solid #ccc;
  display: flex;
  justify-content: center;
  gap: 0 1rem;
}
.btn {
  background-color: #fff;
  width: 120px;
  padding: 1rem;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-weight: 600;
  cursor: pointer;
}
.btn-yes {
  background-color: rgb(29, 135, 227);
  color: #fff;
}

 

 

 

💣주의

위에 코드대로 작성할 경우,

modal-body에 높이가 길어질록 아래 사진과 같은 문제가 발생한다.

 

 

이를 방지하고자  modal-body에 높이를 지정해주고 스크롤 할수있도록 한다.

추가로 스크롤을 커스텀 해도 좋다.

 

 

 

 

 

 

 

🔎 예시 - JavaScript

스크립트는 이전에 사용한 querySelector() 함수로 class를 지정하고

style() 함수로 원하는 스타일을 가져오거나 변경할 수 있다.

 

사용방법은

style.원하는 스타일 명.변경하고자하는 속성 순으로 작성하면 된다.

만약 여러개의 스타일을 변경을 하고싶다면 style.cssText를 사용한다.

 

  const btnModal = document.querySelector('.btn-modal')
  const modal = document.querySelector('aside.modal-wrapper');
  const btnModalClose = document.querySelector('.modal-wrapper .btn-close');
  
  btnModal.addEventListener("click", () => {
  modal.style.display = "block";
  });
  btnModalClose.addEventListener("click", () => {
    modal.style.display = "none";
  });

 

 

 

 

✅ 최종

See the Pen Untitled by yurim99 (@yurim99) on CodePen.