notice（通知）を動的に追加、削除

Atom等のエディタでもお馴染みの通知をテキトーに実装。

# notice_box{position: fixed; top: 2rem; right: 2rem;}
.notice {display: none; width: 250px; background: #ccc; border: 4px solid; margin-bottom: 10px; padding: 8px;}
.notice > p {margin: 0; padding: 0; font-size: 12px;}
.notice_info {background: #0099ff; color: #ffffff; border: 4px solid #0066ff}
.notice_warn {background: #ffffcc; border: 4px solid #ffff00}
.notice_error {background: #ffcccc; border: 4px solid #ff6666}

<div id="notice_box"></div>
<button type="button" id="btn_info">info</button>
<button type="button" id="btn_warn">warn</button>
<button type="button" id="btn_error">error</button>

var gb = {};
$(function(){
    gb.noticeArea = $('#notice_box');
    $('#btn_info').on('click', function(){
        notice('info', 'test test test test test test test');
    });
    $('#btn_warn').on('click', function(){
        notice('warn', 'test<br> test test test test test test');
    });
    $('#btn_error').on('click', function(){
        notice('error', 'test test test<br> test<br> test<br> test test');
    });
});

// 呼べば呼んだだけnoticeを追加して、時間が来たら破棄する。
function notice( level, content, time, width ) {
    var t = time ? time : 3000, w = width ? width : 250;
    var item = $('<div class="notice"><div>')
    gb.noticeArea.append(item);
    item.width(w).addClass(`notice_${level}`).html(`<p>${note}</p>`).slideDown('swing');
	setTimeout(function(){
        item.slideUp('swing' ,function(){
            this.remove();
        });
    }, t);
}