Ajax Loader
×
HTML
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
1
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
2
<!-- Button trigger modal -->
3
<link rel="stylesheet" href="https://raw.github.com/daneden/animate.css/master/animate.css">
4
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/toastr.js/2.0.1/css/toastr.css">
5
 
6
<button class="btn btn-primary btn-lg" id="show">
7
  Show Toast
8
</button>
9
 
10
<button class="btn btn-primary btn-lg" id="clear_and_show">
11
  Clear and Show Toast
12
</button>
13
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
14
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
15
<script src="//cdnjs.cloudflare.com/ajax/libs/toastr.js/2.0.1/js/toastr.js"></script>
 
JavaScript
$(document).ready(function(){
1
$(document).ready(function(){
2
  $('#show').on('click',function(){
3
    toastr.options = {
4
            "closeButton": true,
5
            "debug": false,
6
            "positionClass": "toast-bottom-full-width",
7
            "onclick": null,
8
            "showDuration": "1000",
9
            "hideDuration": "0",
10
            "timeOut": "0",
11
            "extendedTimeOut": "1000",
12
            "showEasing": "swing",
13
            "hideEasing": "linear",
14
            "showMethod": "fadeIn",
15
            "hideMethod": "fadeOut"
16
        };
17
        toastr.error('The message goes here', 'Title');
18
  });
19
  
20
  $('#clear_and_show').on('click',function(){
21
    toastr.clear();
22
    toastr.options = {
23
            "closeButton": true,
24
            "debug": false,
25
            "positionClass": "toast-bottom-full-width",
26
            "onclick": null,
27
            "showDuration": "1000",
28
            "hideDuration": "0",
29
            "timeOut": "0",
30
            "extendedTimeOut": "1000",
31
            "showEasing": "swing",
32
            "hideEasing": "linear",
33
            "showMethod": "fadeIn",
34
            "hideMethod": "fadeOut"
35
        };
36
        toastr.error('The message goes here', 'Title');
37
  });
38
});
 

Toastr Notifications

CSSDeck G+