Today we are going to see how to create auto hide alert box. This type of auto alert box is useful when you display message on any of the user activities. This is user friedly it automatically close the alert box based on the time you set. It also contain the close icon to manually close the alertbox by clicking close button.
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.
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:
<!DOCTYPE html>
<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>
<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>
0 Comments