[Bootstrap] Alert
2022. 5. 26. 11:38ㆍJavaScript/Bootstrap
1. Alert
경고창을 표시하는 용도로 사용하는 UI 요소
2. Alert 주요 css 클래스
Alert 클래스
- alert : 주어진 영역을 Alert으로 생성
Alert 색상 클래스
- alert-success
- alert-info
- alert-warning
- alert-danger
- alert-primary (BS4)
- alert-secondary (BS4)
- alert-light (BS4)
- alert-dark (BS4)
Alert-Link 클래스
- alert-link : Alert 내의 a 태그에 설정하는 css 클래스로써 <string> 태그의 문자열과 같은 색상, 굵기로 설정됨
<div class="container">
<h3>alert 적용 이전</h3>
<div>
<strong>Success</strong> Alert입니다.
</div>
<h3>alert 클래스</h3>
<div class="alert">
<strong>alert</strong> Alert입니다.
</div>
<h3>alert-success 클래스</h3>
<div class="alert alert-success">
<strong>alert-success</strong> Alert입니다.
</div>
<h3>alert-info 클래스</h3>
<div class="alert alert-info">
<strong>alert-info</strong> Alert입니다.
</div>
<h3>alert-warning 클래스</h3>
<div class="alert alert-warning">
<strong>alert-warning</strong> Alert입니다.
</div>
<hr>
3. Alert 닫기
Alert에 닫기 기능을 추가하여 사용자가 Alert을 제거할 수 있도록 제공할 수 있습니다.
<h3>alert-dismissible 클래스</h3>
<div class="alert alert-info alert-dismissible fade in">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>alert-dismissible</strong> Alert입니다.
</div>
4. Alert Script
- .alert(”close”) : 지정된 alert를 보여줌
<script>
function closeAlert(){
$('#test_alert').alert("close");
}
});
</script>
<html>
<body>
<h3>alert-script</h3>
<div class="alert alert-info alert-dismissible fade in" id="test_alert">
<strong>alert-info</strong> Alert입니다.
</div>
<button type="button" onclick="closeAlert()">Alert 닫기</button>
</body>
</html>
5. Alert Event
- close.bs.alert : alert이 닫히기 전에 발생되는 이벤트
- closed.bs.alert : alert이 닫히고 난 후에 발생되는 이벤트
<script>
$(function(){
$('#test_alert').on("close.bs.alert", function(){
alert("Alert 창이 닫히기 직전 이벤트 수행");
});
$('#test_alert').on("closed.bs.alert", function(){
alert("Alert 창이 닫힌 후 이벤트 발생");
});
})
</script>References
source code : https://github.com/yonghwankim-dev/Bootstrap_study/tree/main/Alert/src/main/webapp
[인프런] 윤재성의 Bootstrap 4 & 3 Framework Tutorial
'JavaScript > Bootstrap' 카테고리의 다른 글
| [Bootstrap] Button Group (0) | 2022.05.27 |
|---|---|
| [Bootstrap] Button (0) | 2022.05.26 |
| [Bootstrap] 점보트론(jumbotron) (0) | 2022.05.26 |
| [Bootstrap] 이미지(Image) (0) | 2022.05.26 |
| [Bootstrap] 테이블(Table) (0) | 2022.05.26 |