English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Los mensajes de cuadro de alerta (Alert) se utilizan principalmente para mostrar información como alertas o confirmaciones a los usuarios finales. Al usar el plugin de cuadro de alerta (Alert), puede agregar la funcionalidad de cancelación (dismiss) a todos los mensajes de cuadro de alerta.
Puede activar la funcionalidad de cancelación (dismissal) del cuadro de alerta de las siguientes dos formas:
A través de la propiedad data：Añadir funcionalidad de cancelación a través del API de datos (Data API), solo hay que agregar data-dismiss="alert"y se agregará automáticamente la funcionalidad de cierre para el cuadro de alerta.
<a data-dismiss="alert" href="#" aria-hidden="true"> × </</a>
A través de JavaScript：Añadir funcionalidad de cancelación a través de JavaScript:
$(".alert").alert()El siguiente ejemplo muestra el uso del plugin de cuadro de alerta (Alert) a través de la propiedad data.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> Ejemplo de Bootstrap - Plugin de cuadro 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"> × </</a> <strong>¡Advertencia!</strong>/<strong>Tienes un problema de conexión de red.</strong> </div> </body> </html>Prueba aquí ‹/›
Los resultados se muestran a continuación:
Sin opciones.
A continuación se presentan algunos métodos útiles del plugin de cuadro de alerta (Alert):
| Método | Descripción | Ejemplo |
|---|---|---|
| .alert() | Este método hace que todos los cuadros de alerta tengan la función de cierre. | $('#identifier').alert(); |
| Método de cierre .alert('close') | Cerrar todos los cuadros de alerta. | $('#identifier').alert('close'); |
Para activar los efectos de animación al cerrar, asegúrese de que se haya agregado .fade y .in class。
El siguiente ejemplo muestra: .alert() Uso del método:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> Ejemplo de Bootstrap - >Plugin de cuadro de alerta (Alert) método <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>Plugin de cuadro de alerta (Alert) método <alert()>/h2>
<div id="myAlert" class="alert alert-success">
<a href="#" class="close" data-dismiss="alert">×</</a>
¡Éxito! </El resultado es exitoso.
</div>
<div id="myAlert2" class="alert alert-warning">
<a href="#" class="close" data-dismiss="alert">×</</a>
<strong>¡Advertencia!</strong>/<strong>Tienes un problema de conexión de red.</strong>
</div>
<script>
$(function() {
$(".close").click(function(){
$("#myAlert").alert();
$("#myAlert2").alert();
});
});
</script>
</body>
</html>Prueba aquí ‹/›El siguiente ejemplo muestra: .alert('close') Uso del método:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> Ejemplo de Bootstrap - >Plugin de cuadro de alerta (Alert) método <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>Plugin de cuadro de alerta (Alert) método <alert('close')>/h2>
<div id="myAlert" class="alert alert-success">
<a href="#" class="close" data-dismiss="alert">×</</a>
¡Éxito! </El resultado es exitoso.
</div>
<div id="myAlert2" class="alert alert-warning">
<a href="#" class="close" data-dismiss="alert">×</</a>
<strong>¡Advertencia!</strong>/<strong>Tienes un problema de conexión de red.</strong>
</div>
<script>
$(function() {
$(".close").click(function(){
$("#myAlert").alert('close');
$("#myAlert2").alert('close');
});
});
</script>
</body>
</html>Prueba aquí ‹/›Puedes ver que todos los cuadros de alerta aplican la función de cierre, es decir, cerrar cualquier cuadro de alerta, los otros cuadros de alerta restantes también se cerrarán.
La siguiente tabla enumera los eventos que se utilizan en el plugin de cuadro de alerta (Alert). Estos eventos se pueden usar como ganchos en las funciones.
| Evento | Descripción | Ejemplo |
|---|---|---|
| close.bs.alert | al llamar close Este evento se activa inmediatamente cuando se llama | $('#myalert').bind('close.bs.alert', function () {
// Ejecutar algunas acciones...
) |
| closed.bs.alert | Este evento se activa cuando se cierra el cuadro de alerta (esperando que finalice el efecto de transición CSS). | $('#myalert').bind('closed.bs.alert', function () {
// Ejecutar algunas acciones...
) |
Los siguientes ejemplos muestran los eventos del plugin de cuadro de alerta (Alert):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> Ejemplo de Bootstrap - Evento del plugin de cuadro de alerta </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">×</</a>
¡Éxito! </El resultado es exitoso.
</div>
<script type="text/javascript">
$(function() {
$("#myAlert").bind('closed.bs.alert', function () {
alert("El cuadro de mensaje de alerta se cerró.");
});
});
</script>
</body>
</html>Prueba aquí ‹/›Los resultados se muestran a continuación: