English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
As mensagens de janela de alerta (Alert) são usadas principalmente para exibir informações como alertas ou mensagens de confirmação ao usuário final. Com o plugin de janela de alerta (Alert), você pode adicionar a funcionalidade de cancelamento (dismiss) a todas as mensagens de janela de alerta.
Você pode ativar a funcionalidade de cancelamento (dismissal) da janela de alerta de duas maneiras:
Adicionar via propriedade dataAdicionar funcionalidade de cancelamento via API de dados (Data API), basta adicionar ao botão de fechamento data-dismiss="alert"Será automaticamente adicionada a função de fechamento para a janela de alerta.
<a data-dismiss="alert" href="#" aria-hidden="true"> × </>
Adicionar via JavaScriptAdicionar funcionalidade de cancelamento via JavaScript:
$(".alert").alert()O exemplo a seguir demonstra o uso do plugin de janela de alerta (Alert) através da propriedade data.
!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Exemplo Bootstrap - Plugin de janela de alerta (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>Aviso!</strong>/<strong>Sua conexão de rede está com problema.</strong> </div> </body> </html>Teste e veja ‹/›
Os resultados são exibidos conforme abaixo:
Sem opções.
A seguir estão algumas métodos úteis no plugin de janela de alerta (Alert):
| Método | Descrição | Exemplo |
|---|---|---|
| .alert() | Este método faz com que todas as janelas de alerta tenham a função de fechamento. | $('#identifier').alert(); |
| Método de fechamento .alert('close') | Fechar todas as janelas de alerta. | $('#identifier').alert('close'); |
Para ativar o efeito de animação ao fechar, certifique-se de que foi adicionado .fade e .in classe.
O exemplo a seguir demonstra .alert() Uso do método:
!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Exemplo Bootstrap - >Janela de alerta (Alert) plugin <alert()> método</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>Janela de alerta (Alert) plugin <alert()> método</h2>
<div id="myAlert" class="alert alert-success">
<a href="#" class="close" data-dismiss="alert">×</>
Sucesso!/O resultado é bem-sucedido.
</div>
<div id="myAlert2" class="alert alert-warning">
<a href="#" class="close" data-dismiss="alert">×</>
<strong>Aviso!</strong>/<strong>Sua conexão de rede está com problema.</strong>
</div>
<script>
$(function() {
$(".close").click(function(){
$("#myAlert").alert();
$("#myAlert2").alert();
});
});
</script>
</body>
</html>Teste e veja ‹/›O exemplo a seguir demonstra .alert('close') Uso do método:
!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Exemplo Bootstrap - >Janela de alerta (Alert) plugin <alert('close')> método</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>Janela de alerta (Alert) plugin <alert('close')> método</h2>
<div id="myAlert" class="alert alert-success">
<a href="#" class="close" data-dismiss="alert">×</>
Sucesso!/O resultado é bem-sucedido.
</div>
<div id="myAlert2" class="alert alert-warning">
<a href="#" class="close" data-dismiss="alert">×</>
<strong>Aviso!</strong>/<strong>Sua conexão de rede está com problema.</strong>
</div>
<script>
$(function() {
$(".close").click(function(){
$("#myAlert").alert('close');
$("#myAlert2").alert('close');
});
});
</script>
</body>
</html>Teste e veja ‹/›Você pode ver que todos os alertas aplicam a função de fechamento, ou seja, ao fechar qualquer alerta, todos os outros alertas restantes também serão fechados.
A tabela a seguir lista os eventos usados pelo plugin de alerta de aviso. Esses eventos podem ser usados como ganchos em funções.
| Evento | Descrição | Exemplo |
|---|---|---|
| close.bs.alert | Quando chamar close Este evento é acionado imediatamente ao chamar o método. | $('#myalert').bind('close.bs.alert', function () {
// Execute algumas ações...
) |
| closed.bs.alert | Este evento é acionado quando o alerta é fechado (aguardando o efeito de transição CSS). | $('#myalert').bind('closed.bs.alert', function () {
// Execute algumas ações...
) |
A seguir, há um exemplo que demonstra os eventos do plugin de alerta de aviso:
!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Exemplo Bootstrap - Eventos do plugin de alerta de aviso</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">×</>
Sucesso!/O resultado é bem-sucedido.
</div>
<script type="text/javascript">
$(function() {
$("#myAlert").bind('closed.bs.alert', function () {
alert("A janela de mensagem de aviso foi fechada.");
});
});
</script>
</body>
</html>Teste e veja ‹/›Os resultados são exibidos conforme abaixo: