자바스크립트(Javascript) 간단한 모달(Modal)창 레이어 팝업 만들기

모달 창은 사용자와의 상호작용을 요구할 때 사용되는 팝업 창의 한 형태이다. 모달 창이 나타나면 일반적으로 사용자는 모달 창 외부의 콘텐츠에 대한 상호작용을 일시적으로 중지하고 모달 창과 상호작용합니다.

 

모달창은 여러 종류로 쓰이는데,  대표적으로 쓰이는 몇가지를 알아보자.

 

모달창의 종류(레이어 팝업)

1. 알림 창: 사용자에게 메시지를 표시하고 OK 버튼을 클릭하여 확인할 수 있도록 한다.
2. 사용자 입력 양식: 사용자로부터 정보나 데이터를 입력 받을 수 있도록 한다.
3. 이미지 뷰어: 이미지를 확대하여 표시하거나 다운로드할 수 있는 모달 창을 표시할 수 있다.
4. 설정 창: 사용자 설정을 변경할 수 있는 모달 창을 표시할 수 있다.

html코드

먼저 버튼을 만들어 준다.

<button id="modal-btn">자바스크립트 모달창</button>

 

모달창을 만들어 준다.

<div id="modal" class="dialog">
  <div class="tb">
    <div class="inner" style="max-width:800px;"">
      <div class="top">
	      <div class="title">모달창 제목</div>
        <a href="#" class="p_close">닫기</a>
      </div>
      <div class="ct">
      모달 창 내용
      </div>
    </div>
  </div>
</div>

 

 

 

CSS코드

.dialog {
  display:none;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 10;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
}

.dialog>.tb {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

.dialog>.tb .inner {
  width: 100%;
  padding: 20px;
  background: #fff;
  border-radius: 16px;
}

.dialog .top {
  display: flex;
  align-item: center;
  border-bottom: 1px solid #ddd;
  justify-content: space-between;
  padding-bottom: 15px;
  margin-bottom: 15px;
}

.dialog .title {
  font-weight: bold;
  font-size: 20px;
}

.dialog .ct {
  max-height: 60vh;
  height: 60vh;
  overflow-y: auto;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  background-color: #fff;
}

 

CSS코드에서 .dialog의 display를 none으로 설정해 주어야 한다.

자바스크립트로 CSS의 display속성을 이용해서 이벤트를 넣기 위해서이다.

 

javascript 코드

const modal = document.querySelector("#modal");
const btn = document.querySelector("#modal-btn");
const close = document.querySelector(".close");

// 모달창 열기
btn.onclick = function() {
  modal.style.display = "block";
}

// 모달창 닫기
close.onclick = function() {
  modal.style.display = "none";
}

 

이렇게 하면 모달창이 완성이다.

자바스크립트로도 만들 수 있지만 제이쿼리(Jquery)로도 간단히 만들 수 있다.

2024.03.20 - [IT/JQuery] - 제이쿼리(JQuery) 간단한 모달(Modal)창 레이어 팝업 만들기

제이쿼리(JQuery) 간단한 모달(Modal)창 레이어 팝업 만들기

반응형

 

최종코드

See the Pen Untitled by 문정현 (@wqmlgxov-the-flexboxer) on CodePen.

모달 창은 사용자 경험을 향상시키고 사용자가 특정 작업을 수행하도록 유도하는 데 유용 하다.

하지만 모달 창이 너무 자주 나타나거나 사용자에게 방해가 되는 경우 사용자 경험에 부정적인 영향을 미칠 수 있기 때문에 한 페이지에 너무 많은 모달창은 사용하지 않는게 좋습니다.

 

오늘의 포스팅은 여기까지입니다.

끝까지 읽어주셔서 감사합니다.