Message notify bootstrap

by irwan dwiyanto

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/admin-lte/2.3.8/css/AdminLTE.min.css">
<div class="message notifications callout callout-success">
						<h4>Berhasil</h4>
						<p>Data alat sudah dihapus.</p>
					</div>
          
<button class='show'>Click</button>

CSS

.notifications {
	cursor: pointer;
	position: fixed;
	right: 0px;
	z-index: 10312;
	bottom: 0;
	margin-bottom: 22px;
	margin-right: 15px;
	min-width: 300px; 
	max-width: 800px;   
}

JavaScript

$( ".message" ).hide();
$('.show').click(function () {
      $('.message').slideDown('slow').delay(3000).slideUp('slow');
});