JSFiddle - React, Tailwind, and code Playground

by shapeshifta

HTML

<button>hinweis</button>mehrfach klicken...
<br />
<a href="#">warnung</a> mehrfach klicken...

CSS

#position-notifications {
    position:absolute;
    bottom:10px;
    right:10px;
    z-index:10000;
    max-width:350px;
}
.notifications {
    max-width:350px;
    border-radius:8px;
    background:#666;
    margin-top:10px;
    float:right;
}
.close-notice {
    position:absolute;
    top:10px;
    right:-30px;
    color:#fff;
    text-decoration:none
}
.close-notice:hover {
    color: #000;
    background: #fff
}

.notice-text {
    border-right:1px solid #ccc;
    margin-right:50px;
    padding:20px;
    position:relative;
    color:#fff;
}
.warning-notice {
    background:red;
    color:#fff;
}

JavaScript

(function ($) {

    $.fn.notify = function (options) {
        //settings and notfication area
        var settings = $.extend({}, $.fn.notify.defaults, options),
            notes = $('#position-notifications');

        //create notification, add close handler
        if (!notes.length) {
            notes = $('<div id="position-notifications"></div>').appendTo('body');
            notes.on('click', 'a.close-notice', function (e) {
                $(this).closest('.notifications').remove();
                e.preventDefault();
            });
        }

        return this.each(function () {
            //append or prepend notes to notification area
            var $this = $(this);
            $this.css({
                display: 'none',
                opacity: 0.8
            })[settings.stack === 'above' ? 'prependTo' : 'appendTo'](notes).fadeIn(settings.speed);

            //fade out after xx seconds
            if (typeof settings.expires === 'number') {
                window.setTimeout(function () {
                    $this.slideUp(settings.speed, function () {
                        $(this).remove();
                    });
                }, settings.expires);
            }

        });

    };

    $.fn.notify.defaults = {
        speed: 500, //fadeout speed
        expires: 5000, //when each faces out
        stack: 'above' //append or prepend
    };
})(jQuery);

$('button').click(function () {
    $('<div class="notifications"><div class="notice-text">Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen sie in Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans. <a href="#" class="close-notice">X</a></div></div>').notify();
});

$('a').click(function (e) {
    $('<div class="notifications warning-notice"><div class="notice-text">Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen sie in...