2014-12-18

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.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:40%;left:40%;}
</style>

<script>
$(function(){
 $('#btn').click(function(){
  $('.panel-tost').fadeIn(500).fadeOut(2000);
 });
});
</script>

<input type="button" id="btn" class="btn btn-default" value="tost">

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

딱히 설명한것도 없다. jquery의 fadeIn과 fadeOut을 가지고 잠깐 메세지가 나타났다가 사라지면 그게 토스트일테니 말이다.