This alert box responsive one because we are using bootstrap framework. This auto close alert box created by using bootstrap and jquery. Here is the demo page you can see the live demo by click demo button below. You can download the code and use it. I hope this is very simple and very useful to you.
Auto Hide Alert box using Bootstrap:
<html>
<head>
<title>
Auto Hide Alert box using Bootstrap</title>
<style>
.alert
{
max-width:500px;
margin:0 auto;
margin-top:50px;
}
.san-button
{
background-color: #009688 !important;
color: #fff !important;
width: 161px;
margin: 0 auto;
display: block !important;
}
</style>
</head>
<body>
<link rel=”stylesheet” href=”https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css” />
<div class=”product-options”>
<a id=”myWish” href=”javascript:;” class=” san-button btn btn-mini”>Click for Alert box </a>
</div>
<div class=”alert alert-success” id=”success-alert”>
<button type=”button” class=”close” data-dismiss=”alert”>x</button>
<strong>Success! </strong> Product have added to your wishlist.
</div>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js”></script>
<script type=”text/javascript”>
$(document).ready(function() {
$(“#success-alert”).hide();
$(“#myWish”).click(function showAlert() {
$(“#success-alert”).fadeTo(2000, 500).slideUp(500, function() {
$(“#success-alert”).slideUp(500);
});
});
});
</script>
</body>
</html>
