jQuery Simple Example

by rluuan

HTML

<script src="//www.addressfinder.co.nz/assets/v2/widget.js"></script>
<head></head>
<body>
  
  
</body>

CSS

.Ellipsis {
    font-size: 16px;
    height: 48px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

body { 
    background-color: #dfdfdf; 
    font-family: 'Open Sans', sans-serif; 
}
.notificationPopUp_Wrapper { 
    position: fixed; 
    top: 10px;     
    content: "";
    z-index: 30;
}

.notificationPopUp_Content.default { background-color: #46AFE1; }
.notificationPopUp_Content.success { background-color: green;   }
.notificationPopUp_Content.alert   { background-color: #E49209; }
.notificationPopUp_Content.error   { background-color: #FD243E; }
.notificationPopUp_Content.info    { background-color: #46AFE1; }
.notificationPopUp_Content.iconClose { font-size: 16px; color: #fff; width: 50px; text-align: center; position: absolute; right: 0px; top: 25%; cursor: pointer; }
.nbs-text-left   { text-align: left; }
.nbs-text-center { text-align: center; }
.nbs-text-right  { text-align: right; }

@media only screen and (min-width: 1200px) { 
    .positionRight { 
        right: 20px; 
    } 
    .positionLeft { 
        left: 20px; 
    } 
    .positionFull {
        width: 100%;
        padding: 20px;
    }
    .notificationPopUp_Content { 
        display: block; 
        position: relative; 
        top: 60px;
        width: 98% !important;
        max-width: 100%;
        color: #fff; 
        width: auto;
        margin: 10px 0px 0px 0px; 
        padding: 10px;
        font-size: 16px; 
        border-radius: 3px; 
        
    }
    .textFull {
            
    }
}
.textMessage {
    margin: 20px 40px auto 20px;
    
}
@media only screen and (max-width: 768px) { 
    .positionMid, .positionLeft, .positionRight  { 
            left: 20px; 
            width: 90%; 
            padding: 20px; 
    }
    .positionFull { width: 90%; left: 20px; }
    .notificationPopUp_Content { 
        display: block; 
        max-width: 540px; 
        min-width: 270px; 
        position: relative; 
        color:...

JavaScript

var nui = nui || {}, ntWrapper, ntWrapperPopUp, lengthDiv, notification;
    
$(document).ready(function() {
    // that's for have div to append

    var notificationWrapper = $('<div>', {
        class: 'notificationPopUp_Wrapper'
    });
    $('body').append(notificationWrapper);
    $('head').append("<meta name='viewport' content='width=device-width, initial-scale=1.0'>");
    notificationNimbiShop();
    notification = new nui.Notification();
    
    $('div').on('click', '.iconClose', function() {
        $(this).parents('.notificationPopUp_Content').stop(true, false).dequeue().fadeOut(1400, function() {
            $(this).remove()
        });
    });
});
function notificationNimbiShop() {
    var template  = "<div class='notificationPopUp_Content #1 #textAlign'>";
        template += "<div style='display: flex;'><div style='width: 98%;'><i class='#iconBefore'></i><span class='textMessage'> #2</span></div>";
        template += "<div style='width: 2%; cursor: pointer;'><div class='iconClose'>X</div></div></div></div>";
    
    nui.Notification = function(){
        this._options = {
                type: 'success',
                position: 'positionRight',
                classe: 'fas fa-check',
                time: 50000000,
                textAlign: 'left',
                showMessage: function(message) {
                    ntWrapper      = $('.notificationPopUp_Wrapper');
                    ntWrapperPopUp = $('.notificationPopUp_Content');
                    
                    ntWrapper.addClass(this.position);
                    template = template.replace('#1', this.type).replace('#2', message).replace('#iconBefore', this.classe).replace('#textAlign', this.textAlign);
                    
                    $(template).prependTo('.notificationPopUp_Wrapper').delay(this.time).queue( function() {
                        $(this).dequeue().remove();
                    });
                    // the position 'left' 50% for 'div absolute' gonna...