[Js/jQuery] 웹에서 모바일처럼 Toast 창 띄우기 (잠깐 알림창)

/**

 *     Browser :: IE9+, Chrome, Safari, Firefox, Opera

 *     Desc :: Toast

 **/

HTML

<div class='error' style='display:none'>Error</div>

CSS

.error {
    width: 250px;
    height: 20px;
    height:auto;
    position: fixed;
    left: 50%;
    margin-left:-125px;
    bottom: 100px;
    z-index: 9999;
    background-color: #383838;
    color: #F0F0F0;
    font-family: Calibri;
    font-size: 15px;
    padding: 10px;
    text-align:center;
    border-radius: 2px;
    -webkit-box-shadow: 0px 0px 24px -1px rgba(56, 56, 56, 1);
    -moz-box-shadow: 0px 0px 24px -1px rgba(56, 56, 56, 1);
    box-shadow: 0px 0px 24px -1px rgba(56, 56, 56, 1);
}

Jquery

$('.error').fadeIn(400).delay(1000).fadeOut(400); //fade out after 3 seconds

Result

/**

 *    궁금한 점은 댓글로 남겨주세요.

 *   Please fell free to ask me any questions.

 **/

Error