Boîte d'alerte Bootstrap


Bootstrap Plug-in d'alerte

Les messages d'alerte sont principalement utilisés pour afficher des informations telles que des avertissements ou des messages de confirmation aux utilisateurs finaux. À l'aide du plugin Alert, vous pouvez ajouter une fonctionnalité de licenciement à tous les messages d'alerte.

Utilisation

Vous pouvez activer la fonction de renvoi de la boîte d'avertissement des deux manières suivantes :

  • Grâce à l'attribut de données : Ajoutez la fonction annulable via l'API Data. Ajoutez simplement data-dismiss="alert" au bouton de fermeture, et la fonction de fermeture sera automatiquement ajoutée à la boîte d'avertissement.

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

  • via JavaScript : Ajouter une fonctionnalité annulable via JavaScript :

$(".alert").alert()

Exemple

L'exemple suivant montre l'utilisation du plug-in Alert via l'attribut data

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>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

Les options

n'ont pas d'options.

Méthodes

Voici quelques méthodes utiles dans le plug-in Alert :

MéthodeDescriptionInstance
.alert()Cette méthode Make toutes les boîtes d'avertissement peuvent être fermées. 
$('#identifier').alert();
方法描述实例
.alert()该方法让所有的警告框都带有关闭功能。
$('#identifier').alert('close');
Close Method .alert('close')关闭所有的警告框。
<!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>
Méthode de fermeture<🎜> .alert('close')		Fermez toutes les boîtes d'avertissement. 
<!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>
Pour activer l'animation à la fermeture, assurez-vous d'ajouter les classes .fade et .in.

Exemple

L'exemple suivant montre l'utilisation de la méthode .alert() :

Exemple

$('#myalert').bind('close.bs.alert', function () {
  // 执行一些动作...
})

Exécuter l'instance»

Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne

L'exemple suivant montre .alert(' close') Utilisation de la méthode :

Instance

$('#myalert').bind('closed.bs.alert', function () {
  // 执行一些动作...
})

Exécuter l'instance»

Cliquez sur "Exécuter l'instance" bouton pour afficher en ligne Exemple

Vous pouvez voir que toutes les boîtes d'avertissement ont la fonction de fermeture appliquée, c'est-à-dire que toute boîte d'avertissement est fermée et les autres boîtes d'avertissement restantes seront également fermées.

Événements

Le tableau suivant répertorie les événements utilisés dans le plug-in Alert. Ces événements peuvent être utilisés comme hooks dans les fonctions.

事件描述实例
close.bs.alert当调用 close 实例方法时立即触发该事件。
<!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>
closed.bs.alert当警告框被关闭时触发该事件（将等待 CSS 过渡效果完成）。rrreee

Exemple

L'exemple suivant illustre les événements du plug-in Alert :

Exemple

rrreee

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne