JSFiddle - React, Tailwind, and code Playground

by Jigar Dafda

HTML

Position :
<select id="pos">
    <option value="top-left" selected>Top Left</option>
    <option value="bottom-left">Bottom Left</option>
</select>
<br/>
<textarea id="msg"></textarea>
<br/>
<button class="create-message">show message</button>


<div class="message"></div>

CSS

.message{
    position: fixed;
    width: 100px;
    height: 50px;
    background: green;
    color: white;
    padding: 3px;
    border-radius: 3px;
    opacity: 0;
    -webkit-transition: opacity 1s;
    transition: opacity 1s;
}

.message.display {
    opacity: 1;
}

.message.top-left {
    top: 10px;
    right: 10px;
}

.message.bottom-left {
    bottom: 10px;
    right: 10px;
}

JavaScript

$.fn.notify = function(message, settings_overwrite){
    var settings = {
        placement:"top-left",
        delay: 2000
    };
    
    $.extend(settings, settings_overwrite);
    var $this = $(this);
    $this.removeClass('bottom-left top-left');
    $this.text(message);
    $this.addClass(settings.placement + ' display');
    $this.on('click', function(){
         $this.removeClass('display');
    });
    setTimeout(function(){
        $this.removeClass('display');
    }, settings.delay);
}

$(document).ready(function ($) {
    
    $('body').on('click', '.create-message', function(){
        
        $('.message').notify($('#msg').val(), {
            placement: $('#pos').val()
        });
    });
});