Notifications & Alert Message

Template use noty plugin, which is one of the most trusted notification plugins.

For more informations about options and methods, please visit plugin website:

Noty Documentation

How to use Notification?

1. Add specific javascript

Add inside body at the end of your page, before main template scripts:

<script src="assets/plugins/noty/jquery.noty.packaged.min.js"></script>

2. Create your notification via Javascript

All notification are made via javascript. It will permit you to define position, type of notification, your message... One example below:

var n = noty({
    text        : '<div class="alert alert-success"><p><strong>Your message.</p></div>',
    layout      : 'top', //or left, right, bottom-right...
    theme       : 'made',
    maxVisible  : 10,
    animation   : {
        open  : 'animated bounceInLeft',
        close : 'animated bounceOutLeft'
    },
    timeout: 3000,
});

Layouts available: top, bottom, left, right, center, topLeft, topRight, bottomLeft, bottomRight, centerLeft and centerRight.

Animation effects: you can choose all effects you want available here Animate CSS.

Notification inside a Panel

If you want to have your notification inside a specific panel, you will have to indicate the notification container.

For example, if you want a notification inside a panel with an id panel-notif, your js code will be like:

var n = $('#panel-notif').noty({
    text        : '<div class="alert alert-success media fade in"><p>Your message.</p></div>',
    layout      : 'top',
    theme       : 'made',
    animation   : {
        open  : 'animated bounceInLeft',
        close : 'animated bounceOutLeft'
    },
    timeout: 3000,
});

Notification Hiding Methods

There are 3 hiding methods: after a delay that you want, on click and with user confirmation (button).

1. After a Delay: just add your delay for timeout in milliseconds. For example 3000 for 3 seconds, like here:

var n = noty({
    text   : '<div class="alert alert-success media fade in"><p>Your message.</p></div>',
    timeout: 3000,
});

2. On click on notification: Just set timeout to false. It will be hide only onclick.

var n = noty({
    text   : '<div class="alert alert-success media fade in"><p>Your message.</p></div>',
    timeout: false,
});

3. With Button Confirmation: it could be interesting to ask for user confirmation. For example, are you sure you want to remove this? Here is an example:

var n = noty({
    text   : '<div class="alert alert-success media fade in"><p>Your message.</p></div>',
    timeout: false,
    buttons: [{
                addClass: 'btn btn-primary', text: 'Ok', onClick: function ($noty) {
                    $noty.close();
                }
            },{
                addClass: 'btn btn-danger', text: 'Cancel', onClick: function ($noty) {
                    $noty.close();
                }
            }
        ],
});