부트스트랩 경고 상자


Bootstrap Alert 플러그인

경고 메시지는 대부분 최종 사용자에게 경고 또는 확인 메시지와 같은 정보를 표시하는 데 사용됩니다. 경고 플러그인을 사용하면 모든 경고 메시지에 해제 기능을 추가할 수 있습니다.

Usage

다음 두 가지 방법으로 경고 상자의 해제 기능을 활성화할 수 있습니다.

  • 데이터 속성을 통해: 데이터 API(Data API)를 통해 해제 기능을 추가하고, 해제 기능만 추가하면 됩니다. 닫기 버튼에 data-dismiss="alert"를 추가하면 경고 상자에 닫기 기능이 자동으로 추가됩니다.

<a class="close" data-dismiss="alert" href="#" aria-hidden="true">
  ×
</a>

  • 합격 JavaScript: JavaScript를 통해 취소 가능한 기능 추가:

$(".alert").alert()

Example

다음 예는 데이터 속성

을 통해 경고 플러그인을 사용하는 방법을 보여줍니다. Instance

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 警告框（Alert）插件</title>
   <link href="http://libs.baidu.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <script src="http://libs.baidu.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="alert alert-warning">
   <a href="#" class="close" data-dismiss="alert">
      ×
   </a>
   <strong>警告！</strong>您的网络连接有问题。
</div>

</body>
</html>

인스턴스 실행»

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요

Options

옵션이 없습니다.

Methods

Alert 플러그인의 몇 가지 유용한 메소드는 다음과 같습니다.

MethodDescriptionInstance
.alert()이 메소드는 모든 경고 상자를 종료 기능으로 만듭니다. 
$('#identifier').alert();
Close Method .alert('close')모든 경고 상자를 닫습니다. 
$('#identifier').alert('close');
닫을 때 애니메이션을 활성화하려면 .fade 및 .in 클래스를 추가해야 합니다.

Example

다음 예에서는 .alert() 메서드의 사용법을 보여줍니다.

Example

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 警告框（Alert）插件 alert() 方法</title>
  <link href="http://libs.baidu.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <script src="http://libs.baidu.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

<h3>警告框（Alert）插件 alert() 方法</h3>
<div id="myAlert" class="alert alert-success">
   <a href="#" class="close" data-dismiss="alert">×</a>
   <strong>成功！</strong>结果是成功的。
</div>
<div id="myAlert" class="alert alert-warning">
   <a href="#" class="close" data-dismiss="alert">×</a>
   <strong>警告！</strong>您的网络连接有问题。
</div>

<script type="text/javascript">
$(function(){
   $(".close").click(function(){
      $("#myAlert").alert();
   });
});  
</script> 

</body>
</html>

Run Instance»

온라인 예제를 보려면 "인스턴스 실행" 버튼을 클릭하세요

아래 예는 .alert('close') 메소드의 사용법을 보여줍니다:

Instance

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 警告框（Alert）插件 alert('close') 方法</title>
  <link href="http://libs.baidu.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <script src="http://libs.baidu.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

<h3>警告框（Alert）插件 alert('close') 方法</h3>
<div id="myAlert" class="alert alert-success">
   <a href="#" class="close" data-dismiss="alert">×</a>
   <strong>成功！</strong>结果是成功的。
</div>
<div id="myAlert" class="alert alert-warning">
   <a href="#" class="close" data-dismiss="alert">×</a>
   <strong>警告！</strong>您的网络连接有问题。
</div>

<script type="text/javascript">
$(function(){
   $(".close").click(function(){
      $("#myAlert").alert('close');
   });
});  

</script>   

</body>
</html>

Run Instance»

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요

당신 모든 경고 상자를 볼 수 있습니다. 닫기 기능이 적용됩니다. 즉, 모든 경고 상자가 닫히고 나머지 경고 상자도 닫힙니다.

Events

다음 표에는 경고 플러그인에 사용되는 이벤트가 나열되어 있습니다. 이러한 이벤트는 함수의 후크로 사용될 수 있습니다.

EventDescriptionInstance
close.bs.alert이 이벤트는 close 인스턴스 메소드가 호출될 때 즉시 트리거됩니다. 
$('#myalert').bind('close.bs.alert', function () {
  // 执行一些动作...
})
closed.bs.alert이 이벤트는 경고 상자가 닫힐 때 트리거됩니다(CSS 전환 효과가 완료될 때까지 기다립니다). 
$('#myalert').bind('closed.bs.alert', function () {
  // 执行一些动作...
})

Instance

다음 예는 경고 플러그인의 이벤트를 보여줍니다.

Instance

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 警告框（Alert）插件事件</title>
   <link href="http://libs.baidu.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <script src="http://libs.baidu.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

<div id="myAlert" class="alert alert-success">
   <a href="#" class="close" data-dismiss="alert">×</a>
   <strong>成功！</strong>结果是成功的。
</div>

<script type="text/javascript">
$(function(){
   $("#myAlert").bind('closed.bs.alert', function () {
      alert("警告消息框被关闭。");
   });
});
</script>  

</body>
</html>

인스턴스 실행»

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요