JAVASCRIPT

display toastr warning

toastr.warning('something wrong');

display toastr success

toastr.success('successful');

toastr.success

view source
01
toastr.error('Error','Error Title',{
02
 
03
  // tap to dismiss
04
  tapToDismiss:true,
05
 
06
  // toast class
07
  toastClass:'toast',
08
 
09
  // container ID
10
  containerId:'toast-container',
11
 
12
  // debug mode
13
  debug:false,
14
   
15
  // fadeIn, slideDown, and show are built into jQuery
16
  showMethod:'fadeIn',
17
 
18
  // duration of animation
19
  showDuration: 300,
20
 
21
  // easing function
22
  showEasing:'swing',
23
 
24
  // callback function
25
  onShown: undefined,
26
  onHidden: undefined,
27
 
28
  // hide animation
29
  hideMethod:'fadeOut',
30
 
31
  // duration of animation
32
  hideDuration: 1000,
33
 
34
  // easing function
35
  hideEasing:'swing',
36
   
37
  // close animation
38
  closeMethod:false,
39
 
40
  // duration of animation
41
  closeDuration:false,
42
 
43
  // easing function
44
  closeEasing:false,
45
 
46
  // timeout in ms
47
  extendedTimeOut: 1000,
48
 
49
  // you can customize icons here
50
  iconClasses: {
51
    error:'toast-error',
52
    info:'toast-info',
53
    success:'toast-success',
54
    warning:'toast-warning'
55
  },
56
  iconClass:'toast-info',
57
 
58
  // toast-top-center, toast-bottom-center, toast-top-full-width
59
  // toast-bottom-full-width, toast-top-left, toast-bottom-right
60
  // toast-bottom-left, toast-top-right
61
  positionClass:'toast-top-right',
62
 
63
  // set timeOut and extendedTimeOut to 0 to make it sticky
64
  timeOut: 5000,
65
 
66
  // title class
67
  titleClass:'toast-title',
68
 
69
  // message class
70
  messageClass:'toast-message',
71
 
72
  // allows HTML content in the toast?
73
  escapeHtml:false,
74
 
75
  // target container
76
  target:'body',
77
 
78
  // close button
79
  closeHtml:'<button type="button">&times;</button>',
80
 
81
  // place the newest toast on the top
82
  newestOnTop:true,
83
 
84
  // revent duplicate toasts
85
  preventDuplicates:false,
86
 
87
  // shows progress bar
88
  progressBar:false
89
   
90
})

display toastr error

toastr.error('error');

toast success

$.toast({
    heading: 'Information',
    text: 'Now you can add icons to the toasts as well.',
    icon: 'info'
})

display toastr info

toastr.info('toastr message info');