Beuszó notify ablakok

SignalR és NodJs-nél használható értesítő ablakok

by sas_sam

HTML

<div id="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed suscipit, nisl egestas feugiat cursus, nulla tellus lobortis elit, ac viverra nisl nisl vitae sem. Phasellus vel feugiat odio. Fusce ac vehicula ante. Nam magna lacus, pretium et mauris ut, vehicula lacinia tellus. In ipsum lacus, facilisis sit amet lorem eu, congue bibendum nunc. Etiam et hendrerit odio. Donec porta malesuada erat. Quisque sed venenatis orci. Proin porttitor eu nisi vitae hendrerit. Proin bibendum erat eget leo commodo, non venenatis velit mattis.</p>
    <p>Donec neque nunc, aliquam dapibus diam a, cursus porttitor neque. Fusce laoreet magna dolor, ultrices aliquet dui cursus quis. Aenean id lorem et urna rhoncus egestas. In congue tempus mattis. Nam sit amet odio at neque tristique consectetur sed tristique lectus. Praesent ut metus id ipsum aliquam lacinia. Ut vitae feugiat erat, non sodales odio. In condimentum orci augue, eu sollicitudin tortor volutpat eu. Quisque nisl augue, sagittis suscipit pulvinar vitae, ultricies id mauris. Morbi vitae venenatis libero. Fusce vel erat a erat varius adipiscing. Vivamus suscipit est ac volutpat fermentum. Maecenas eu rutrum orci. Proin suscipit feugiat sem, id malesuada leo imperdiet non.</p>
</div>

CSS

#content {
    background: #cccccc;
    position: relative;
}
.box-notify {
    background: yellow;
    width: 150px;
    height: 50px;
    position: absolute;
    top: 0;
    right: -150px;
    opacity: 0;
    z-index: 9999;
}

JavaScript

$(function () {
    $("#content").on("click", function () {
        console.log($(this).offset());

        var $box = $('<div class="box-notify"></div>');

        $(".box-notify").animate({
            top: "+=60"
        }, 300);


        $("#content").prepend($box);
        $(".box-notify:first-child").animate({
            opacity: 0.75,
            right: "+=150"
        }, 500, function () {
            var timer = setInterval(function () {
                $box.fadeOut(300, function () {
                    $(this).remove();
                });
            }, 2000);
        });

    });

});