Untitled

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script type="text/javascript" src="//code.jquery.com/jquery-latest.min.js"></script>

<style>
.panel-tost{
	display:none;
    position:absolute;
    background:#555555;
    color:#ffffff;
    width:230px;
    text-align:center;
    z-index:6001;
    opacity:.8;
    filter:alpha(opacity=50);
    top:80%;
    left:40%;}
</style>

</head>
<body>


<button id="btnToast">Show Snackbar</button>

<div class="panel panel-tost">
 <div class="panel-heading">fade~ post~</div>
</div>

<script>
$(document).ready(function(){
	$('#btnToast').on('click',function(){
    	$('.panel-heading').text('ㅋㅋㅋ');
    	$('.panel-tost').fadeIn(500).fadeOut(2000);
    });
});
</script>

</body>
</html>