PopUp Notification Final

by rluuan

HTML

<script src="https://fonts.googleapis.com/css?family=Open+Sans"></script>
<script src="https://tn01-sb.nimbi.net.br/FontAwesome/fontawesome-pro-5.1.0/js/all.js"></script>
<div class="notificationPopUp_Wrapper">
    
</div>


<div class="botao">
    <input type="button" class="teste" value="Adicionar" />
</div>

<div class='r'>
  rodrigo 
  <div class='a' style='cursor: pointer;'>
    luan
  </div>
</div>

CSS

body { background-color: #dfdfdf; font-family: 'Open Sans', sans-serif; }


.notificationPopUp_Wrapper { position: absolute; top: 0px;     content: ""; }
.notificationPopUp { display: block; position: relative; color: #fff; width: auto;
    max-width: 400px; margin: 10px 0px 0px 0px; padding: 10px 30px 10px 10px;
    font-size: 12px; border-radius: 3px; }


.notificationPopUp.default { background-color: #46AFE1; }
.notificationPopUp.success { background-color: green; }
.notificationPopUp.alert { background-color: #E49209; }
.notificationPopUp.error { background-color: #FD243E; }

.notificationPopUp .iconClose { font-size: 16px; color: #fff; position: absolute; right: 10px; top: 10px; cursor: pointer; }
.notificationPopUp_Wrapper.positionRight { right: 20px; }

JavaScript

var nui = nui || {};
    
    nui.Notification = function(o){
        this._options = {
                type: 'Success',
                position: 'positionRight',
                showMessage: function(message){
                    $('.notificationPopUp_Wrapper').addClass(this.position);
                    $('<div class="notificationPopUp ' + this.type + '">'+ message +'<div class="iconClose"><i class="fal fa-times"></i></div></div>').prependTo('.notificationPopUp_Wrapper').delay(3000).queue(function() { $(this).stop().fadeOut(250).remove(); });
                  
                }
 
        }
    }
i = 0;
$('.teste').on('click', function() {
  
    var notification = new nui.Notification();
    notification._options.type = 'error'
    notification._options.position = 'positionRight',
    notification._options.showMessage('O produto foi adicionado com sucesso ' + i);
    i++;
});

$(document).on('click', '.iconClose', function() {
    $(this).parents('.notificationPopUp').fadeOut("slow", function() { 
        $(this).remove(); 
    });
});