El componente Bootstrap Toast proporciona una manera fácil de imitar la funcionalidad de las notificaciones automáticas. Bootstrap Toast es como un cuadro de alerta que se puede mostrar al usuario cada vez que ocurre un evento. Este componente se ha construido con CSS flexbox, lo que facilita su colocación y alineación.
No es necesario mostrar el brindis con un clic de botón. Se puede mostrar para cualquier tipo de evento que ocurra en el navegador. Veamos un ejemplo.
Ejemplo: Creación de Notificación/Toast de Bootstrap. En este ejemplo, mostraremos una notificación automática cuando el usuario desplace el <div> en la página. Para crear un brindis de arranque, necesitamos usar la clase brindis en una división y agregar dos divisiones dentro de ella con las clases brindis-encabezado y brindis-cuerpo . Mostraremos la notificación usando jquery.
<!DOCTYPE html>
<html lang="en">
<head>
<title>
How to load notification alert on top
right corner without click of button
in bootstrap ?
</title>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
</script>
<style>
#notification {
position: absolute;
top: 0;
right: 0;
}
#para {
border: 1px solid black;
width: 300px;
height: 100px;
overflow: scroll;
}
.toast-color {
color: white;
background-color: #33b5e5;
}
h1 {
color:green;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>Try Scrolling:</h3>
<div id="para">
<b>GeeksforGeeks:</b> A computer science portal
for geeks. It ia a good website for learning
computer science. It has a good programming
Question and have many Interwiew Experiences.
Prepare for the Recruitment drive of product
based companies like Microsoft, Amazon, Adobe
etc with a free online placement preparation
course.
</div>
<div class="toast toast-color" id="notification"
data-delay="3000">
<div class="toast-header toast-color">
<strong class="mr-auto">SCROLLED!</strong>
<small>Just Now</small>
<button type="button" class="ml-2 mb-1 close"
data-dismiss="toast" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="toast-body">
Hi! You just scrolled the paragaraph.
</div>
</div>
<script>
$(document).ready(function() {
$("#para").scroll(function() {
$('.toast').toast('show');
});
});
</script>
</body>
</html>
Producción:
- Antes de desplazar el contenido:
- Después de desplazar el contenido:
Publicación traducida automáticamente
Artículo escrito por vipinbailwal_gfg2018 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA