목차
Alert Color (얼럿 색깔) - 배경색 + 글자색
Alert Link (얼럿 링크)
Alert Close (얼럿 닫기)
Alert Animation (얼럿 애니효과)
[JS] Alert CSS Class 종류 (ABC순) ★
[JS] data- * 속성으로 Alert 닫기
[JS] JS로 Alert 닫기
[JS] Alert Option (얼럿 옵션)
[JS] Alert Method (얼럿 메서드)
[JS] Alert Event (얼럿 이벤트)
Alert Color (얼럿 색깔) - 배경색 + 글자색
<div class="alert alert-success ">
<strong>Success!</strong> 성공적・긍정적 조치 (연녹색)
</div>
<div class="alert alert-info ">
<strong>Info!</strong> 중립적 정보변경・동작 (연청록)
</div>
<div class="alert alert-warning ">
<strong>Warning!</strong> 주의 필요함 경고 (연오렌지・아이보리색)
</div>
<div class="alert alert-danger ">
<strong>Danger!</strong> 위험하거나 잠재적으로 부정적인 동작 안내 (연분홍・연보라)
</div>
<div class="alert alert-primary ">
<strong>Primary!</strong> 중요한 행위 지시 (연하늘)
</div>
<div class="alert alert-secondary ">
<strong>Secondary!</strong> 덜 중요한 행위 지시 (밝은연회색)
</div>
<div class="alert alert-dark ">
<strong>Dark!</strong> 진회색 경고.
</div>
<div class="alert alert-light ">
<strong>Light!</strong> 연회색 경고
</div>
결과보기
Alert Link (얼럿 링크)
※ 링크에 (.alert-link) 클래스 추가.
<div class="alert alert-success">
<strong>Success!</strong> 설명서 <a href="#" class="alert-link ">Click</a>.
</div>
결과보기
Alert Close (얼럿 닫기)
<div class="alert alert-success alert-dismissible ">
<button type="button" class="close" data-dismiss="alert" >×</button>
<strong>Success!</strong>
</div>
결과보기
PS1. 링크형태도 가능. (예) <a href="#" class="close" data-dismiss="alert">×</a>
PS2. × 의미: 닫기 버튼 아이콘으로 사용되는 X 모양 HTML실체값코드.
Alert Animation (얼럿 애니효과)
<div class="alert alert-success alert-dismissible fade show ">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>Success!</strong>
</div>
결과보기
[참고] fade 및 show 클래스 : 서서히 사라지는 애니효과. (별 차이 없음. ㅡㅡ;)
[JS] Alert
[JS] Alert CSS Class 종류 (ABC순) ★
.alert
경고창.
.alert-danger
연분홍 경고창. (※ 위험하거나 잠재적으로 부정적인 행동 의미)
.alert-dark
진회색 경고상자
.alert-dismissible
닫을 수 있는 경고창. ※ (.close) 클래스와 함께 이 클래스는 경고 닫는 데 사용.
※ 추가적인 패딩 추가.
.alert-heading
지정요소에 color:inherit 추가.
.alert-info
연파랑 경고창. (중립적인 정보 변경 또는 조치 의미)
.alert-light
연회색 경고창
.alert-link
경고창 안의 링크에 대해서, 경고창 배경색과 어울리는 링크색 제공.
.alert-primary
연파랑 경고창. (중요 의미)
.alert-secondary
연회색 경고창. ("덜" 중요 의미)
.alert-success
연녹색 경고창. (성공・긍정 의미)
.alert-warning
연노랑 경고창. (주의・조심 의미)
.close
경고상자 닫기 버튼 스타일 지정. ※ 지정된 "글꼴 크기, 색상" 등으로 오른쪽에 배치.
[JS] data- * 속성으로 Alert 닫기
<div class="container">
<div class="alert alert-success alert-dismissible" >
<button type="button" class="close" data-dismiss="alert" >× </button>
<strong>홈짱닷컴</strong> Homzzang.com
</div>
</div>
※ button태그 대신 a태그 사용 가능: <a href="#" class="close" data-dismiss="alert">×</a>
[JS] JS로 Alert 닫기
<div class="alert alert-success alert-dismissible" id="hz" >
<button type="button" class="close">×</button>
<strong>Success!</strong>
</div>
<script>
$(document).ready(function(){
$(".close").click(function(){
$("#hz").alert("close");
});
});
</script>
결과보기
[JS] Alert Option (얼럿 옵션)
none
[JS] Alert Method (얼럿 메서드)
.alert("close")
경로 메세지 닫기. (예) $("#hz").alert("close");
.alert("dispose")
요소의 Alert 파괴. (참고: 테스트해보니 정상작동 X)
[JS] Alert Event (얼럿 이벤트)
close.bs.alert
경고 메시지를 닫을 때 발생.
closed.bs.alert
경고 메시지가 닫히면 발생. (CSS 전환이 완료 될 때까지 기다림.)
[예제]
<div class="container">
<div class="alert alert-success alert-dismissible" id="hz">
<button type="button" class="close">×</button>
<strong>홈짱닷컴</strong> Homzzang.com
</div>
</div>
<script>
$(document).ready(function(){
$(".close").click(function(){
$("#hz").alert("close");
});
$("#hz").on ('closed.bs.alert ', function(){
alert('Homzzang.com 자주 찾아주세요.');
});
});
</script>
결과보기
주소 복사
랜덤 이동