Bootstrap 기본 강의

Bootstrap 플러그인

Bootstrap 경고 창(Alert) 플러그인

경고 창(Alert) 메시지는 주로 최종 사용자에게 경고나 확인 메시지와 같은 정보를 표시하는 데 사용됩니다. 경고 창(Alert) 플러그인을 사용하면 모든 경고 창 메시지에 취소(dismiss) 기능을 추가할 수 있습니다.

사용법

경고 창의 취소(dismissal) 기능을 활성화할 수 있는 두 가지 방법이 있습니다:

데이터 속성을 통해데이터 API(Data API)를 통해 취소 가능 기능 추가, 닫기 버튼에 추가하면 됩니다: data-dismiss="alert"이렇게 하면 경고 창에 자동으로 닫기 기능이 추가됩니다.
```
<a data-dismiss="alert" href="#" aria-hidden="true">
　　　　×
</>
```
JavaScript를 통해JavaScript를 통해 취소 가능 기능 추가:
```
$(".alert").alert()
```

온라인 예제

아래의 예제는 data 속성을 통해 경고 창(Alert) 플러그인의 사용법을 보여줍니다.

온라인 예제

예제

!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap 예제　-　경고 창(Alert) 플러그인/title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="alert alert-warning">
	<a href="#" class="close" data-dismiss="alert">
		×
	</>
	<strong>경고!</strong>/<strong>네트워크 연결이 문제입니다。</strong>
</div>
</body>
</html>

테스트해 보세요 ‹/›

결과는 다음과 같습니다:

옵션

옵션 없음.

메서드

아래는 경고 창(Alert) 플러그인에서 사용할 수 있는 유용한 메서드 몇 가지입니다:

메서드	설명	예제
.alert()	이 메서드는 모든 경고 창에 닫기 기능을 추가합니다.	$('#identifier').alert();
닫기 메서드 .alert('close')	모든 경고 창을 닫습니다.	$('#identifier').alert('close');

애니메이션 효과를 켜고 닫을 때, 추가해야 합니다: .fade 및 .in class.

온라인 예제

아래의 예제는 다음과 같이 표시됩니다: .alert() 메서드의 사용법:

온라인 예제

예제

!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Bootstrap 예제　-　경고 창(Alert) 플러그인 alert() 메서드</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<h2>경고 창(Alert) 플러그인 alert() 메서드</h2>
<div id="myAlert" class="alert alert-success">
　　　　<a href="#" class="close" data-dismiss="alert">×</>
　　　　성공!/결과는 성공적입니다。
</div>
<div id="myAlert2" class="alert alert-warning">
　　　　<a href="#" class="close" data-dismiss="alert">×</>
　　　　<strong>경고!</strong>/<strong>네트워크 연결이 문제입니다。</strong>
</div>
　
<script>
$(function() {
　　　　$(".close").click(function(){
　　　　　　　　$("#myAlert").alert();
　　　　　　　　$("#myAlert2").alert();
　　　　});
});
</script>
</body>
</html>

테스트해 보세요 ‹/›

아래의 예제는 다음과 같이 표시됩니다: .alert('close') 메서드의 사용법:

온라인 예제

예제

!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Bootstrap 예제　-　경고 창(Alert) 플러그인 alert('close') 메서드</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<h2>경고 창(Alert) 플러그인 alert('close') 메서드</h2>
<div id="myAlert" class="alert alert-success">
　　　　<a href="#" class="close" data-dismiss="alert">×</>
　　　　성공!/결과는 성공적입니다。
</div>
<div id="myAlert2" class="alert alert-warning">
　　　　<a href="#" class="close" data-dismiss="alert">×</>
　　　　<strong>경고!</strong>/<strong>네트워크 연결이 문제입니다。</strong>
</div>
　
<script>
$(function() {
　　　　$(".close").click(function(){
　　　　　　　　$("#myAlert").alert('close');
　　　　　　　　$("#myAlert2").alert('close');
　　　　});
});
</script>
</body>
</html>

테스트해 보세요 ‹/›

모든 경고 창이 닫히는 기능이 적용되었습니다. 즉, 어떤 경고 창을 닫아도 다른 경고 창도 닫히게 됩니다。

이벤트

아래 표는 경고 창(Alert) 플러그인에서 사용할 이벤트를 나열합니다. 이 이벤트는 함수에서 훅으로 사용할 수 있습니다。

이벤트	설명	예제
close.bs.alert	close.bs.alert을 호출할 때 close 예제 메서드가 즉시 이 이벤트를 트리거합니다。	$('#myalert').bind('close.bs.alert', function () { 　　//　일부 동작을 수행합니다... )
closed.bs.alert	경고 창이 닫혔을 때 이 이벤트가 발생합니다（CSS 트랜지션 효과가 완료될 때까지 기다립니다）。	$('#myalert').bind('closed.bs.alert', function () { 　　　　//　일부 동작을 수행합니다... )

온라인 예제

아래 예제는 경고 창(Alert) 플러그인의 이벤트를 보여줍니다：

온라인 예제

예제

!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap 예제　-　경고 창(Alert) 플러그인 이벤트</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div id="myAlert" class="alert alert-success">
	<a href="#" class="close" data-dismiss="alert">×</>
	성공!/결과는 성공적입니다。
</div>
<script type="text/javascript">
$(function() {
	$("#myAlert").bind('closed.bs.alert', function () {
		alert("경고 메시지 팝업이 닫혔습니다.");
	});
});
</script>　　
</body>
</html>

테스트해 보세요 ‹/›

결과는 다음과 같습니다:

Bootstrap 버튼 플러그인 Bootstrap 팝업 플러그인