This blog is useful to all my friends who are working on the .Net Technology and wants to enhance their skills as well their problem solving ability.

Saturday, January 25, 2020

How Toastr JS works !!! Very easy - Just follow these 3 steps #Alert #Notification

1 - Include JS CSS in your HTML Page 
CSS - https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.css
JS -  https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js

2 - Master/Global/Container page add below code - Options of Toastr 
toastr.options = {
        "closeButton": true,
        "debug": false,
        "newestOnTop": false,
        "progressBar": false,
        "positionClass": "toast-bottom-full-width",
        "preventDuplicates": false,
        "onclick": null,
        "showDuration": "300",
        "preventDuplicates": true,
        "hideDuration": "1000",
        "timeOut": "0",
        "extendedTimeOut": "1000",
        "showEasing": "swing",
        "hideEasing": "linear",
        "showMethod": "fadeIn",
        "hideMethod": "fadeOut"
};

3 - Page level below command we can use depending on your message type
Info - toastr["info"]('msg');
Success - toastr["success"]('msg');
Error - toastr["error"]('msg');
toastr["warning"]('msg');