Notification Bubbles

by Maksim Kachurin

HTML

<div id="notify-bubble">
    <button type="button" class="modal-close close-widget">x</button>
    <div class="image-holder"></div>
    <div class="content-holder">
         <h4>Заголовок события</h4>
 <span class="content">Текст события. Очень много текста, возможно совсем много</span>

    </div>
</div>
<span onclick="window.showNotify('Заголовок успешно', 'Текст успешно', 'success')">Успешно</span>
<br />
<span onclick="window.showNotify('Заголовок предупреждение', 'Текст предупреждение', 'warning')">Предупреждение</span>
<br />
<span onclick="window.showNotify('Заголовок ощибка', 'Текст ошибка', 'error')">Ошибка</span>

CSS

#notify-bubble {
    display: none;
    background-color: #fafdfd;
    border: 1px solid #dadada;
    border-radius: 4px;
    min-width: 200px;
    max-width: 300px;
    padding: 20px;
    box-shadow: 0 3px 10px #dadada;
    position: fixed;
    z-index: 10;
    top: 10%;
    right: 50px;
}
#notify-bubble .modal-close {
    position: absolute;
    top: 10px;
    right: 10px;
}
#notify-bubble h4 {
    border-bottom: 1px solid #e0e0e0;
    width: 80%;
    margin: 0 auto 10px;
    padding-bottom: 6px;
}
#notify-bubble.warn {
    border-left: 4px solid orange;
}
#notify-bubble.err {
    border-left: 4px solid red;
}
#notify-bubble.suc {
    border-left: 4px solid green;
}

JavaScript

window.showNotify = function (title, text, type, centered) {

    var bubble = $('#notify-bubble'),
        b_class = 'default';

    //text
    $('h4', bubble).html(title);
    $('.content', bubble).html(text);

    //class
    switch (type) {
        case 'success':
            b_class = 'suc';
            break;
        case 'error':
            b_class = 'err';
            break;
        case 'warning':
            b_class = 'warn';
            break;
        default:
            b_class = type;
    }
    bubble.removeClass().addClass(b_class);

    if (centered) {
        bubble.css({
            top: "calc(50% - " + bubble.height() + "px)",
            right: "calc(50% - " + bubble.width() / 2 + "px)"
        });
    } else {
        bubble.css({
            top: "10%",
            right: "50px"
        });
    }
    // show
    bubble.fadeIn();

    // hide 10s
    clearTimeout(window.tBubble);
    window.tBubble = setTimeout(function () {
        bubble.fadeOut();
        delete window.tBubble;
    }, 1000 * 3);
}

window.showConfirm = function (title, text, callbackYes, callbackNo, centered) {

    var bubble = $('#confirm-bubble');

    //text
    $('h4', bubble).html(title);
    $('.content', bubble).html(text);

    // event disable
    $('#confirm-true, #confirm-false', bubble).off('click');

    // callbacks
    if (typeof callbackYes === 'function') {
        $('#confirm-true', bubble).on('click', callbackYes);
    }

    if (typeof callbackNo === 'function') {
        $('#confirm-false', bubble).on('click', callbackNo);
    }

    // show bubble
    bubble.fadeIn();
}