By Espina Studio
Suscribe to our newsletter & get early
access to new content.
Notification
Overview
Provide short messages about web page processes at the bottom of the screen.
Toggle alert
Thank you, your new product has been added to the cart successfully.
The page will reload shortly.
The page will reload shortly.
<a href="#" data-toggle="show" class="pill pill-flex pill-flex-center text-center mb-15 mr-10 px-10 menu-item" data-target="#product_add_success" role="button" aria-expanded="false" aria-controls="product_add_success">
Toggle alert</a>
<!-- ALERT NOTIFICATION - RECOMMENDED PRODUCT _ADD_ SUCCESS -->
<div id="product_add_success" class="alert alert-primary" role="alert">
Thank you, your new product has been added to the cart successfully.<br>
<b>The page will reload shortly.</b>
</div>
<!-- END: ALERT NOTIFICATION - RECOMMENDED PRODUCT _ADD_ SUCCESS -->
.example-container{
.alert {
position: fixed;
bottom: -200%;
left: 50%;
z-index: 9999;
transform: translateX(-50%);
transition: bottom 0.4s ease;
text-align: center;
}
@media (max-width: 767.98px) {
.alert {
width: 85%;
text-align: center;
}
}
.alert-primary {
color: #ffffff;
background-color: black;
border-color: black;
}
.alert.show {
bottom: 10px;
}
@media (max-width: 767.98px) {
.alert.show {
bottom: 40px;
}
}
}$('#product_add_success').addClass("show");
setTimeout(function() {
$('#product_add_success').removeClass("show");
}, 4500);
Las notificaciones de alerta solo deberían aparecer durante unos segundos, en caso de que no se requiera una acción de confirmación por el usuario.
Variant
Purpose
Prioridad baja
Desaparece automáticamente
Banner: Prioridad Media
Los banners permanecen hasta que el usuario los descarta. Requieren un botón de acción dentro del banner.
Copied to clipboard