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

1. Toast 소개
2. Toast 구문
3. Toast 제어 - Show/Hide (보이기/숨기기)
4. Toast Class (클래스)
5. Toast Option (옵션)
6. Toast Method (메서드)
7. Toast Event (이벤트)

Toast 소개

 

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

 

Toast 구문

 

<button type="button" class="btn btn-primary" id="hz">홈짱닷컴 소개</button>

 

<div class="toast">

  <div class="toast-header">Homzzang.com</div>

  <div class="toast-body">홈페이지 제작관리강의</div>

</div>

 

<script>

$(document).ready(function(){

  $("#hz").click(function(){

    $('.toast').toast('show');

  });

});

</script>

 

예제보기

---

[참고] 문서의 모든 toast 내용 보기

 

<script>

$(document).ready(function(){

  $('.toast').toast('show');

});

</script>

 

※ 토스트는 지정요소 선택 후 jQuery toast() 메서드 호출해 초기화 해야 함.

Toast 제어 - Show/Hide (보이기/숨기기)

 

<div class="toast" data-autohide="false">

  <div class="toast-header">

    <strong class="mr-auto text-primary">Homzzang.com</strong>

    <small class="text-muted">5 mins ago</small>

    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast">&times;</button>

  </div>

  <div class="toast-body">

    홈페이지 제작관리강의

  </div>

</div>

 

예제보기

---

[코드해석]

 

data-autohide="false" 속성 :  Toast 보이기 설정.

data-dismiss="toast" 속성 : Toast 닫기

 

Toast Class (클래스)

 

.toast  :  토스트 생성.

.toast-header  :  토스트 머리말.

.toast-body  :  토스트 내용.

 

Toast Option (옵션)

 

animation

토스트 표시하거나 숨길 때 CSS 페이드 전환 효과 추가 여부. (기본값: true)

true : 페이딩 효과 추가 O

false : 페이딩 효과 추가 X

 

autohide

기본적으로 토스트를 숨길 지 여부. (기본값: true)

 

delay

토스트가 표시되면 숨기는 데 걸리는 시간 (밀리 초). (기본값: 500)

 

---

 

<script>

$(document).ready(function(){

  $('#hz').click(function(){

    $('.toast').toast({animation: false});

    $('.toast').toast({autohide: false});

    $('.toast').toast({delay: 2000});

    $('.toast').toast('show');

  });

});

</script>

 

Toast Method (메서드)

Toast Event (이벤트)