Tạo hiệu ứng thông báo từ bên trái màn hình

Sử dụng cho Bootstrap 3 và có Animate.css. Demo ngay tại bài viết này!

CSS

Thêm thư viện Animate.css.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.0/animate.min.css">

Thêm đoạn mã CSS sau.

.init-alert {
    border: none;
    border-left: 3px solid #09c;
    border-radius: 0;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
}

.fixed-alert {
    width: 275px;
    position: fixed;
    z-index: 999999999;
    bottom: 60px;
    left: 15px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.alert-left-icon {
    font-size: 36px;
    line-height: 1;
    display: table-cell;
}

.alert-right-content {
    display: table-cell;
    padding-left: 10px;
    vertical-align: middle;
}

.blue {
    color: #3468C0;
}

.org {
    color: #f7b42c;
}

.green {
    color: #66DE93;
}

JS

Tạo một hàm thông báo như sau.

$(document).ready(function() {
    function pushAlert(icon, cls, mess, time) {
        $('body').append('<div class="animate__animated animate__bounceInLeft alert alert-info init-alert alert-dismissible m-b-0 fixed-alert"><button type="button" class="close close-fixed-alert" aria-label="Close"><span aria-hidden="true">×</span></button><div class="alert-left-icon"><span class="glyphicon glyphicon-' + icon + ' ' + cls + '"></span></div><div class="alert-right-content">' + mess + '</div></div>');
        setTimeout(function() {
            $('.fixed-alert').removeClass('animate__bounceInLeft').addClass('animate__bounceOutLeft');
            $('.fixed-alert').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function() {
                $(this).remove();
            });
        }, time);
        $('.close-fixed-alert').click(function() {
            $('.fixed-alert').removeClass('animate__bounceInLeft').addClass('animate__bounceOutLeft');
            $('.fixed-alert').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function() {
                $(this).remove();
            });
        });
    }
});

Sử dụng như sau.

pushAlert('thumbs-up', 'blue', 'Chào mừng bạn đến với InitHTML!', 3950);

Với thumbs-up lấy từ Glyphicon, blue là class màu sắc khai báo trong CSS và 3950 là thời gian xuất hiện thông báo. Chúc các bạn thành công!