Ternary 연산자로 자바스크립트에서의 메시지 모달 구현

08 Nov 2023

javascript

이번 블로그 포스트에서는 자바스크립트에서 메시지 모달을 구현하는 방법을 알아보겠습니다. 특히, Ternary 연산자를 활용하여 간단하게 모달의 상태를 관리할 수 있습니다.

메시지 모달이란?

메시지 모달은 사용자에게 메시지를 표시하기 위해 사용되는 팝업 창입니다. 일반적으로 오류 메시지, 성공 메시지 또는 경고 메시지를 사용자에게 알리는데 사용됩니다. 이번 예제에서는 간단한 성공 메시지 모달을 구현해 보겠습니다.

구현 방법

HTML 마크업 작성하기

<div id="modal" class="modal">
  <div class="modal-content">
    <span id="modal-message" class="modal-message"></span>
  </div>
</div>

CSS 스타일링

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(0, 0, 0, 0.5);
  display: none;
  z-index: 9999;
}

.modal-content {
  background-color: white;
  padding: 20px;
  border-radius: 5px;
}

.modal-message {
  font-size: 18px;
}

자바스크립트로 모달 관리하기

// 모달 엘리먼트 선택
const modal = document.getElementById('modal');
const modalMessage = document.getElementById('modal-message');

// 모달 표시 함수
const showModal = (message) => {
  modalMessage.innerHTML = message;
  modal.style.display = 'block';
};

// 모달 닫기 함수
const closeModal = () => {
  modal.style.display = 'none';
};

// 성공 메시지 모달 표시
const showMessageModal = (success) => {
  success ? showModal('작업이 성공적으로 완료되었습니다.') : closeModal();
};

// 예제 사용
showMessageModal(true); // 성공 메시지 모달 표시

위의 예제에서는 showMessageModal() 함수를 사용하여 성공 메시지 모달을 표시하고 있습니다. 이 함수는 Ternary 연산자를 사용하여 success 매개 변수를 기반으로 모달을 열거나 닫는 동작을 수행합니다. 조건이 참일 경우 showModal() 함수를 호출하여 모달을 열고, 조건이 거짓일 경우 closeModal() 함수를 호출하여 모달을 닫습니다.

마치며

이번 포스트에서는 Ternary 연산자를 활용하여 자바스크립트에서 메시지 모달을 간단하게 구현하는 방법을 알아보았습니다. 이러한 방식을 활용하면 간단한 모달 창을 효과적으로 관리할 수 있습니다. 성공 메시지 이외에도 오류 메시지나 경고 메시지를 표시할 때도 유용한 방법입니다. 만약 더 복잡한 모달을 구현하고 싶다면, JavaScript 라이브러리나 프레임워크를 활용하는 것도 고려해 볼 수 있습니다.

이 글이 여러분에게 도움이 되었다면, 함께 공유해 주세요! 😊

참고: MDN Web Docs - Ternary 연산자