Todas las aplicaciones web modernas utilizan alertas para mostrar mensajes al usuario. Estas alertas tienen un botón de cierre para cerrarlas o se pueden cerrar automáticamente usando Twitter Bootstrap. En esta publicación, crearemos el cierre automático de alertas usando Twitter Bootstrap.
La idea básica es usar el método jQuery setTimeout() para cerrar la alerta después del tiempo especificado.
Sintaxis:
setTimeout(function, delay)
Nota: El retraso se define en milisegundos. 1 segundo es igual a 1000 milisegundos.
Ejemplo 1: En este ejemplo, se accede a la alerta en el script usando la identificación y luego la alerta se cierra después de 5 segundos.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
How to Automatically Close Alerts
using Twitter Bootstrap ?
</title>
<!-- Including Bootstrap CSS -->
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<!-- Including jQuery -->
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js">
</script>
<!-- Including Bootstrap JS -->
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">
</script>
</head>
<body>
<h3>Automatically closing the alert</h3>
<!-- Showing alert -->
<div id="alert" class="alert alert-danger">
This alert will automatically
close in 5 seconds.
</div>
<script type="text/javascript">
setTimeout(function () {
// Closing the alert
$('#alert').alert('close');
}, 5000);
</script>
</body>
</html>
Ejemplo 2: En este ejemplo, se accede a la alerta en el script usando su clase y la alerta se cierra después de 2 segundos.
HTML
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type"
content="text/html;charset=utf-8" />
<title>
How to Automatically Close Alerts
using Twitter Bootstrap ?
</title>
<!-- Including Bootstrap CSS -->
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<!-- Including jQuery -->
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js">
</script>
<!-- Including Bootstrap JS -->
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">
</script>
</head>
<body>
<h3>Automatically closing the alert</h3>
<!-- Showing alert -->
<div class="alert alert-danger">
This alert will automatically
close in 2 seconds.
</div>
<script type="text/javascript">
setTimeout(function () {
// Closing the alert
$('.alert').alert('close');
}, 2000);
</script>
</body>
</html>
Ejemplo 3: en este ejemplo, la clase de ocultación de arranque se agrega dinámicamente a la alerta para cerrar la alerta después de 5 segundos. addClass () es el método que se usa para agregar clase a cualquier elemento usando JavaScript.
HTML
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type"
content="text/html;charset=utf-8" />
<title>
How to Automatically Close Alerts
using Twitter Bootstrap ?
</title>
<!-- Including Bootstrap CSS -->
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<!-- Including jQuery -->
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js">
</script>
<!-- Including Bootstrap JS -->
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">
</script>
</head>
<body>
<h3>Automatically closing the alert</h3>
<!-- Showing alert -->
<div id="alert" class="alert alert-danger">
This alert will automatically
close in 5 seconds.
</div>
<script type="text/javascript">
setTimeout(function () {
// Adding the class dynamically
$('#alert').addClass('hide');
}, 5000);
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por aman neekhara y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA