JSFiddle - React, Tailwind, and code Playground

by lonewolfs

HTML

<input id="popup" type="button" value="Popup"/>

CSS

body{padding:0px;margin:0px;}
.notification{position:fixed;background-color:#CCC;border:thin solid #666;color:#666;padding:5px;display:none;z-index:1000;width:100%;
font-size:18px;font-weight:bold;color:#333;}
.blackshadow{-webkit-box-shadow:2px 2px 2px 2px rgba(0,0,0,0.1);-moz-box-shadow:0 0 2px 2px rgba(0,0,0,0.3);box-shadow:0 0 2px 2px rgba(0,0,0,0.3);}
.close{position:absolute;right:2%;top:25%;font-size:13px;}
#popup{position:absolute;top:50%;}

JavaScript

function notification(text){
       $('.notification').remove();
    html = '<div class="notification blackshadow">'+ text +'<span class="close" style="outline:thin;">Close</span></div>';
       $('body').prepend(html);
       $('.notification').slideDown().delay(1000).slideUp();        
}

function notifications(text,time){
    if($('.notification:visible').length === 0){
        //$('body').append('Visible');
        
        html = '<div class="notification blackshadow">'+ text +'</div>';
        $('body').prepend(html);
        $('.notification').slideDown();
        
    }
    else{
        //$('body').append('Invisible!');
      
        $('.notification').text(text); 
     
    }
    if(time > 0){
        if(time < 1000){
            time = 1000;
        }
        $('.notification').delay(time).slideUp(function(){
            $('.notification').remove();
        });
        
    }
}


    notifications('StackOverflow Popup just a bit modified...',0);

$('#popup').live('click',function(){
    notifications('Done!',1000);
   // $('.notification').text('Done...!').delay(1000).slideUp();
});