[basic] BS5 - Toast (BS토스트) - 순간말풍선 (= 팝업상자 = 짧은경고창 = 스낵바)

1. Toast 소개
2. Toast 구문
3. Toast 열기

Toast 소개

 

이벤트 발생 (예 : 사용자가 버튼 클릭하거나 양식 제출 등)할 때, 몇 초 동안 잠깐 표시되는 경고상자.

Toast 구문

 

• Toast는 기본적으로 숨겨져 있는데, .show 클래스 추가해 기본 상태를 노출 상태로 변경 가능.
• Toast 닫기 버튼 추가하려면, Button 태그에 data-bs-dismiss="toast" 속성 추가.

 

---

<div class="container mt-3">  

  <div class="toast show">

    <div class="toast-header">

      <strong class="me-auto">Toast 제목 (예: 홈짱닷컴)</strong>

      <button type="button" class="btn-close" data-bs-dismiss="toast"></button>

    </div>

    <div class="toast-body">

      <p>Toast 내용 (예: Homzzang.com)</p>

    </div>

  </div>

</div>

 

결과보기

Toast 열기

 

버튼 클릭 시 Toast 보이게 하려면, .show 클래스를 제거 후 하단에 해당 버튼을 클릭했을 때 Toast를 show 상태로 초기화시키는 JS 추가하면 됨.

 

---

 

<div class="container mt-3">

  <button type="button" class="btn btn-primary" id="hz">Toast 열기</button>

  

  <div class="toast">

    <div class="toast-header">

      <strong class="me-auto">Toast 제목 (예: 홈짱닷컴)</strong>

      <button type="button" class="btn-close" data-bs-dismiss="toast"></button>

    </div>

    <div class="toast-body">

      <p>Toast 내용 (예: Homzzang.com)</p>

    </div>

  </div>

</div>

<script>

document.getElementById("hz").onclick = function() {

  var toastElList = [].slice.call(document.querySelectorAll('.toast'))

  var toastList = toastElList.map(function(toastEl) {

    return new bootstrap.Toast(toastEl)

  })

  toastList.forEach(toast => toast.show()) 

}

</script>