[PHP] 커스텀 토스트 메시지 띄우기

안녕하세요 이번시간에는 웹에서 커스텀 토스트 메시지를 띄워보겠습니다.

 

토스트 메시지를 구현하기 위해 필요한  코드는 다음과 같습니다.

test.php 파일의 코드 입니다.

버튼을 누르면  toast를 표시하기 위해서 reveal  이라는 클래스를 추가하는 방식입니다.

reveal 클래스를 추가하면 .test_toast.reveal의 css 요소가 적용되면서 토스트가 보이게 됩니다.

<style>
.test_toast {
  display: flex;
  /* 디스플레이 속성을 플렉스로 설정하여 플렉스 박스 레이아웃 활성화 */
  align-items: center;
  /* 내용물의 중심을 토스트 안에 수직으로 맞춥니다. */
  position: fixed;
  /* 브라우저 창을 기준으로 토스트 요소를 배치합니다 */
  top: 10%;
  /* 토스트의 상단 가장자리를 윈도우 상단에서 10% 위치에 놓습니다. */
  left: 50%;
  /* 토스트의 왼쪽 가장자리를 윈도우의 왼쪽에서 50% 위치시키십시오 */
  padding: 20px 20px;
  /* 토스트 안에 있는 내용물에 패딩을 추가합니다 */
  transform: translate(-50%, 10px);
  /* 토스트를 10px 위로 이동시키고 수평으로 중심을 잡습니다 */
  border-radius: 30px;
  /* 토스트에 둥근 모서리를 추가합니다 */
  overflow: hidden;
  /* 토스트에 넘쳐나는 내용 숨기기 */
  font-size: 1.5rem;
  /* 토스트 내부 텍스트의 글꼴 크기 설정 */
  opacity: 0;
  /* 토스트를 숨기려면 초기 불투명도를 0으로 설정합니다 */
  visibility: hidden;
  /* 토스트를 숨기려면 초기 가시성을 숨김으로 설정 */
  transition: opacity 0.5s, visibility 0.5s, transform 0.5s;
  /* 불투명도, 가시성 및 변환 특성에 전환 효과 적용 */
  background: rgba(240, 124, 124, 0.767);
  /* RGBA 값을 사용하여 토스트의 배경색 설정 */
  color: #fff;
  /* 텍스트 색상을 흰색으로 설정 */
  z-index: 10000;
  /* 토스트가 다른 요소 위에 나타나도록 z-index 값을 높게 설정합니다 */
  font-family: 'Jua', sans-serif;
  /* 토스트 안에 있는 텍스트의 글꼴 패밀리 설정 */
  text-shadow: 2px 2px 2px #000;
  /* 토스트 안에 있는 텍스트에 은은한 섀도우 효과 추가 */
}

.test_toast.reveal {
  opacity: 1;
  /* 불투명도를 1로 설정하여 토스트가 보이도록 합니다 */
  visibility: visible;
  /* 토스트가 보이도록 가시성을 설정합니다 */
  transform: translate(-50%, 0);
  /* 변환을 원래 위치로 재설정합니다(수직 오프셋 없음) */
}
</style>




<button onclick="revealCallingToast()">토스트 띄우기</button>

<div class="test_toast" id="test_toast">
  <div id="test_msg"></div>
</div>

<script>
function revealCallingToast() { // 토스트 메시지 띄워주는 함수
  const toast_el = document.querySelector('#test_toast'); //토스트 요소 선택
  const toast_msg = document.querySelector('#test_msg'); // 토스트 안의 메시지 요소 선택
  let removeToast = null;

  // 토스트가 이미 공개된 경우 타임아웃을 해제하고 토스트가 1초 후에 숨겨지도록 예약함.
  // 그렇지 않으면 토스트가 3초 후에 숨겨지도록 예약함.

  toast_el.classList.contains("reveal") ?
    (clearTimeout(removeToast), removeToast = setTimeout(function() {
      toast_el.classList.remove("reveal")
    }, 1000)) :
    removeToast = setTimeout(function() {
      toast_el.classList.remove("reveal")
    }, 3000)
  toast_el.classList.add("reveal"), // 토스트를 표시하기 위해 "reveal" 클래스를 추가
    toast_msg.innerText = "test_toast"; // 메시지 텍스트를 "test_toast"로 설정
}
</script>

 

위 코드를 입력한 후 나타나는 결과는 다음과 같습니다.