-
Bootstrap 알림, 경고(Alert) 기본 사용법DEV/javascript 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">×</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: nonejs 에서는 두 가지 방법을 사용하였다.
첫 번째 방법은 버튼을 누르면 alert을 띄우고 다시 버튼을 눌렀을 떄 alert을 제거한다.
두 번째 방법은 버튼을 누르면 alert을 띄우고 3초 뒤에 alert을 제거한다.
샘플 실행 결과 Bootstrap Alert!
https://getbootstrap.com/docs/4.0/components/alerts/
Alerts
Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.
getbootstrap.com
부트스트랩 설치 및 사용!
https://seokbong.tistory.com/16
Bootstrap 설치 및 사용하기
Bootstrap은 웹사이트를 쉽게 만들 수 있게 도와주는 HTML, CSS, JS 프레임워크이다. 다운로드는 하단 링크를 참조하자. 다양한 설치 방법을 제공한다. 1. "최소화된" 이라 그런가 적용 안되는게 있다. h
seokbong.tistory.com
'DEV > javascript' 카테고리의 다른 글
Javascript 빈 값 체크 (0) 2022.02.25 Bootstrap 모달(Modal) 기본 사용법 (0) 2022.02.22 Bootstrap 기본적인 버튼(Button) 사용법 (0) 2022.02.21 Bootstrap 기본적인 테이블(Table)사용하기 (0) 2022.02.21 Bootstrap 그리드 시스템 (Grid system : row, col) (0) 2022.02.21