How to hide a message after some time interval with jQuery
generating preview
<!DOCTYPE html>
<html lang="en">
<head>
<title> Designer Desk Online: Bootstrap Alert Auto Close / OnClick Bootstrap Alert Auto Close </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="product-options">
<a id="myWish" href="javascript:;" class="btn btn-mini"> Add to Cart </a>
</diva>
<div class="alert alert-success" id="success-alert"a>
<button type="button" class="close" data-dismiss="alert"> x </button>
<strong>Success! </strong> Product have added to your Cart.
</div>
<script>
$(document).ready(function() {
$("#success-alert").hide();
$("#myWish").click(function showAlert() {
$("#success-alert").fadeTo(2000, 500).slideUp(500, function() {
$("#success-alert").slideUp(500);
});
});
});
</script>
<style>
.btn-mini{border:1px solid #ccc; margin:50px;}
</style>
</body>
</html>
How to Use this Elements / Source Code:
You Can Use OnClick Bootstrap Alert Auto hide success message elements by select the above source code (CTRL + A) then copy the code (CTRL + C) and paste (CTRL + V) it in a blank html Page to initially test it. Then you can use the Above OnClick Bootstrap Alert Auto hide success message where ever you want for your project.
Usage of OnClick Bootstrap Alert Auto hide success message:
You Can Use this elements when we submit any form & You need to you a success or or failure message after submitting the form that's why you need this onclick bootstrap alert auto hide success message. Above all you need this kind of tool when you to use any kind of alert of jQuery through your website. This will help you specific notification for your action.