<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-12 my-3">
<h1>Animated Bootstrap alerts with progress bar</h1>
<h5>Animations list here: <a href="https://animate.style/" target="_blank">Animate.css</a></h5>
<h6 class="my-4">Settings explained</h6>
<ul>
<li><strong>type</strong> - Represents the alert class type, you can chose from [dark, info, primary, success, warning, danger, purple, fuchsia] or any other custom alert classes you may create later</li>
<li><strong>message</strong> - Alert body message</li>
<li><strong>timeout</strong> - How long the alerts stays on screen if not dismissed, in ms, 15000 -> 15 seconds</li>
<li><strong>alertBlock</strong> - Class or id of the DOM element you want the alert to append to, by default is body</li>
<li><strong>animateCSS</strong> - Enable <a href="https://animate.style/" target="_blank">Animate.css</a>, enable only if you have the library set up </li>
<li><strong>animIn</strong> - Show animation class from <a href="https://animate.style/" target="_blank">Animate.css</a> ex: animate__flipInX</li>
<li><strong>animOut</strong> - Fading animation class from <a href="https://animate.style/" target="_blank">Animate.css</a> ex: animate__flipOutX</li>
</ul>
</div>
<div class="col-12 mb-3">
<h1>Examples</h1>
</div>
<div class="col-md-6 my-3" id="demo1">
</div>
<div class="col-md-6 my-3" id="demo2">
</div>
<div class="col-md-6 my-3" id="demo3">
</div>
<div class="col-md-6 my-3" id="demo4">
</div>
<div class="col-md-6 my-3" id="demo5">
</div>
<div class="col-md-6 my-3" id="demo6">
</div>
<div class="col-md-6 my-3" id="demo7">
</div>
<div class="col-md-6 my-3" id="demo8">
</div>
</div>
</div>
</body>
<div style="position: fixed;bottom: 5%;right: 5%;">
<h5 style="margin-bottom: 1rem;padding-bottom: 1rem;border-bottom: 1px solid #000;text-align: center;">Support my work @ MMLTech</h5>
<div style="display: flex;align-items: center;">
<a style="margin-right:1rem;background: #d1e6fd;display: block;padding: 1rem;border-radius: 0.25rem;border: 1px solid #e9ecef;color: #000;font-weight: bold;" href="https://ko-fi.com/mmltech" target="_blank"><img src="https://storage.ko-fi.com/cdn/Kofi_Logo_Blue.svg" width="60px"/> Buy me a coffee</a>
<a style="background: #d1e6fd;display: block;padding: 1rem;border-radius: 0.25rem;border: 1px solid #e9ecef;color: #000;font-weight: bold;" href="https://obscountdown.com" target="_blank"><img src="https://streamcd.net/Assets/images/logo-white.png" width="60px" height="19px" /> My projects</a>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</html>
.custom-alert {
overflow: hidden;
}
.custom-alert span.alert-message {
position: relative;
z-index: 2;
}
.custom-alert.alert-dark {
background: #000;
border-left: 5px solid #2d2d2d;
color: #fff;
box-shadow: 0 0 13px 6px #0000001a;
}
.custom-alert.alert-info {
background: #18afbd;
border-left: 5px solid #138792;
color: #fff;
box-shadow: 0 0 13px 6px #0000001a;
}
.custom-alert.alert-primary {
background: #007bff;
border-left: 5px solid #003977;
color: #fff;
box-shadow: 0 0 13px 6px #0000001a;
}
.custom-alert.alert-success {
background: #28a745;
border-left: 5px solid #1d7932;
color: #fff;
box-shadow: 0 0 13px 6px #0000001a;
}
.custom-alert.alert-danger {
background: #dd4444;
border-left: 5px solid #b23737;
color: #fff;
box-shadow: 0 0 13px 6px #0000001a;
}
.custom-alert.alert-warning {
background: #cd9c08;
border-left: 5px solid #8e6c06;
color: #fff;
box-shadow: 0 0 13px 6px #0000001a;
}
.custom-alert.alert-purple {
background: #7045bd;
border-left: 5px solid #52338b;
color: #fff;
box-shadow: 0 0 13px 6px #0000001a;
}
.custom-alert.alert-fuchsia {
background: #ce2672;
border-left: 5px solid #8e1a4f;
color: #fff;
box-shadow: 0 0 13px 6px #0000001a;
}
.custom-alert .alert-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #21252912;
z-index: 1;
}
.custom-alert .close {
box-shadow: none !important;
opacity: 1;
height: 100%;
z-index: 3;
padding-left: 1rem;
padding-right: 1rem;
line-height: 0;
float:none;
display: flex;
align-items: center;
justify-content: center;
align-content: center;
flex-wrap: nowrap;
}
.custom-alert .close span {
box-shadow: none;
-webkit-transition: 0.3s all;
-moz-transition: 0.3s all;
-ms-transition: 0.3s all;
-o-transition: 0.3s all;
transition: 0.3s all;
}
.custom-alert .close:hover span, .custom-alert .close:focus span {
color: #fff;
opacity: 0.35;
}
@media only screen and (max-width: 921px) {
.custom-alert {
padding: 2rem 1rem;
font-size: 1rem;
border-radius: 0;
}
}
(function($){
$.fn.showAlert = function(options) {
let settings = $.extend({
type: "default",
message: "",
timeout: 15000,
alertBlock: "body",
animateCSS: false,
animIn: "",
animOut: ""
}, options);
let alert,
alertOverlay,
alertMessage,
closeButton;
let dismissAlert = function(){
if(!settings.animateCSS)
alert.alert('close');
else{
alert.removeClass('animate__animated ' + settings.animIn);
alert.addClass('animate__animated ' + settings.animOut);
alert.alert('close')
}
};
let build = function () {
alert = $('<div class="alert mb-0 alert-' + settings.type + ' alert-dismissible custom-alert position-relative" role="alert"></div>');
alertOverlay = $('<div class="alert-overlay"></div>');
alertMessage = $('<span class="mr-3 position-relative">' + settings.message + '</span>');
closeButton = $('<a href="#" class="close"><span aria-hidden="true">×</span></button>');
alert.append(alertOverlay);
alert.append(alertMessage);
alert.append(closeButton);
alertMessage.css({
zIndex: 1
});
if(settings.animateCSS)
alert.addClass('animate__animated ' + settings.animIn);
alert.hide();
$(document).find(settings.alertBlock).append(alert);
alert.show();
alertOverlay.animate({left: '-100%'}, settings.timeout, function() {
alert.alert('close');
});
closeButton.click(function (e) {
e.preventDefault();
alert.alert('close')
});
alert.on('close.bs.alert', function (e) {
e.preventDefault();
dismissAlert();
});
alert.on('closed.bs.alert', function (e) {
alert.remove();
})
};
return this.each(function() {
return new build(this, settings);
});
};
})(jQuery);
$(document).showAlert({
alertBlock: "#demo1",
type:"dark",
message: "This is a dark alert demo",
timeout: 95000,
animateCSS: true,
animIn: "animate__flipInX",
animOut: "animate__flipOutX"
});
$(document).showAlert({
alertBlock: "#demo2",
type:"info",
message: "This is a info alert demo",
timeout: 95000,
animateCSS: true,
animIn: "animate__flipInX",
animOut: "animate__flipOutX"
});
$(document).showAlert({
alertBlock: "#demo3",
type:"primary",
message: "This is a primary alert demo",
timeout: 95000,
animateCSS: true,
animIn: "animate__flipInX",
animOut: "animate__flipOutX"
});
$(document).showAlert({
alertBlock: "#demo4",
type:"success",
message: "This is a success alert demo",
timeout: 95000,
animateCSS: true,
animIn: "animate__flipInX",
animOut: "animate__flipOutX"
});
$(document).showAlert({
alertBlock: "#demo5",
type:"warning",
message: "This is a warning alert demo",
timeout: 95000,
animateCSS: true,
animIn: "animate__flipInX",
animOut: "animate__flipOutX"
});
$(document).showAlert({
alertBlock: "#demo6",
type:"danger",
message: "This is a danger alert demo",
timeout: 95000,
animateCSS: true,
animIn: "animate__flipInX",
animOut: "animate__flipOutX"
});
$(document).showAlert({
alertBlock: "#demo7",
type:"purple",
message: "This is a purple alert demo",
timeout: 95000,
animateCSS: true,
animIn: "animate__flipInX",
animOut: "animate__flipOutX"
});
$(document).showAlert({
alertBlock: "#demo8",
type:"fuchsia",
message: "This is a fuchsia alert demo",
timeout: 95000,
animateCSS: true,
animIn: "animate__flipInX",
animOut: "animate__flipOutX"
});
