Bootstrap 알림, 경고(Alert) 기본 사용법

DEV/javascript

Bootstrap 알림, 경고(Alert) 기본 사용법

석봉 2022. 2. 21. 17:56

부트스트랩은 다행이도 이쁜 Alert도 지원한다.

다음과 같은 기본적인 예시 또한 친절하게 알려준다.

<div class="alert alert-warning alert-dismissible fade show" role="alert">
  <strong>Holy guacamole!</strong> You should check in on some of those fields below.
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

아주 훌륭하다.

나는 약간 수정하여 사용하였다.

HTML 샘플

<!DOCTYPE html>
<html>
    <meta charset="utf-8">
<head>
    <!-- [jQuery] -->
    <script src="https://code.jquery.com/jquery-latest.min.js"></script>

    <!-- [Bootstrap] -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>

<body>
    <!-- 
        .alert          << bootstrap alert 지정
        .alert-warning  << bootstrap 노란색 alert으로 변경
        .d-none         << bootstrap에서 사용하는 display: none
     -->
    <div class="alert alert-warning d-none" role="alert" id="tAlert">
        테스트 입니다!
    </div>
    <h4  class="mt-3 ml-3">ALERT TEST</h4>
    <div class="ml-3">
        <button type="button" class="btn btn-sm btn-warning" id="tBtn">Alert?</button>
    </div>
</body>

<script src="./test.js"></script>

</html>

test.js

"use strict"

// 실행
$(function(){
    // ★ 방법 1
    // alert이 없을 때 버튼을 누르면 alert을 띄움
    // alert이 있을 때 버튼을 누르면 alert을 제거
    $(document).on('click', '#tBtn', function(){
        // if (alert에 d-none class가 있는 경우)
        if($('#tAlert').hasClass('d-none')){
            // d-none class 제거
            $('#tAlert').removeClass('d-none');
        }else{
            // d-none class 추가
            $('#tAlert').addClass('d-none');
        }
    });

    // ★ 방법 2
    // 누르고 3초 뒤 alert 제거
    $(document).on('click', '#tBtn', function(){
        $('#tAlert').removeClass('d-none');
        setTimeout(function(){
            $('#tAlert').addClass('d-none');
        }, 3000);
    });
})

우선 alert을 사용하기 위해 3가지 class를 추가하였다.

.alert : bootstrap alert 지정
.alert-warning : bootstrap 노란색 alert으로 변경
.d-none : bootstrap에서 사용하는 display: none

js 에서는 두 가지 방법을 사용하였다.

첫 번째 방법은 버튼을 누르면 alert을 띄우고 다시 버튼을 눌렀을 떄 alert을 제거한다.

두 번째 방법은 버튼을 누르면 alert을 띄우고 3초 뒤에 alert을 제거한다.