Bootstrap - Plugin de Alerta

As mensagens de alerta são usadas principalmente para exibir informações como mensagens de aviso ou confirmação para os usuários finais. Usando o plugin de mensagem de alerta, você pode adicionar a funcionalidade de dispensar a todas as mensagens de alerta.

Se você deseja incluir esta funcionalidade de plug-in individualmente, você precisará do alert.js. Além disso, conforme mencionado no capítulo Visão geral dos plug-ins de bootstrap , você pode incluir bootstrap.js ou bootstrap.min.js minificado .

Uso

Você pode ativar a dispensa de um alerta das duas maneiras a seguir -

  • Via data attributes - Para dispensar via API de dados, basta adicionar data-dismiss = "alert" ao botão Fechar para fornecer automaticamente uma funcionalidade de alerta de fechamento.

<a class = "close" data-dismiss = "alert" href = "#" aria-hidden = "true">
   &times;
</a>
  • Via JavaScript - Para dispensar via JavaScript, use a seguinte sintaxe -

$(".alert").alert()

Exemplo

O exemplo a seguir demonstra o uso do plugin de alerta por meio de atributos de dados.

<div class = "alert alert-success">
   <a href = "#" class = "close" data-dismiss = "alert">
      &times;
   </a>
   
   <strong>Warning!</strong> There was a problem with your network connection.
</div>

Opções

Não há opções aqui.

Métodos

A seguir estão alguns métodos úteis para o plugin de alerta -

Método Descrição Exemplo
.alerta() Este método envolve todos os alertas com funcionalidade de fechamento.
$('#identifier').alert();

Close Method .alert ('fechar')

Para permitir que todos os alertas sejam fechados, adicione este método.
$('#identifier').alert('close');
Para permitir que os alertas sejam animados quando fechados, verifique se eles têm o .fade e .in aula já aplicada a eles.

Exemplo

O exemplo a seguir demonstra o uso de .alert() método -

<h3>Alert messages to demonstrate alert() method </h3>

<div id = "myAlert" class = "alert alert-success">
   <a href = "#" class = "close" data-dismiss = "alert">&times;</a>
   <strong>Success!</strong> the result is successful.
</div>

<div id = "myAlert" class = "alert alert-warning">
   <a href = "#" class = "close" data-dismiss = "alert">&times;</a>
   <strong>Warning!</strong> There was a problem with your network connection.
</div>

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

O exemplo a seguir demonstra o uso de .alert('close') método -

<h3>Alert messages to demonstrate alert('close') method </h3>

<div id = "myAlert" class = "alert alert-success">
   <a href = "#" class = "close" data-dismiss = "alert">&times;</a>
   <strong>Success!</strong> the result is successful.
</div>

<div id = "myAlert" class = "alert alert-warning">
   <a href = "#" class = "close" data-dismiss = "alert">&times;</a>
   <strong>Warning!</strong> There was a problem with your network connection.
</div>

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

Tente este código usando o Try iteditor. Você pode ver que a funcionalidade de fechamento é aplicada a todas as mensagens de alerta, ou seja, feche qualquer mensagem de alerta, o restante das mensagens de alerta também será fechado.

Eventos

A tabela a seguir lista os eventos para trabalhar com o plugin de alerta. Este evento pode ser usado para conectar-se à função de alerta.

Evento Descrição Exemplo
close.bs.alert Este evento é disparado imediatamente quando o método de instância close é chamado.
$('#myalert').bind('close.bs.alert', function () {
   // do something
})
closed.bs.alert Este evento é disparado quando o alerta é fechado (irá aguardar a conclusão das transições CSS).
$('#myalert').bind('closed.bs.alert', function () {
   // do something
})

Exemplo

O exemplo a seguir demonstra os eventos do plugin de alerta -

<div id = "myAlert" class = "alert alert-success">
   <a href = "#" class = "close" data-dismiss = "alert">&times;</a>
   <strong>Success!</strong> the result is successful.
</div>

<script type = "text/javascript">
   $(function(){
      $("#myAlert").bind('closed.bs.alert', function () {
         alert("Alert message box is closed.");
      });
   });
</script>