$('.runTost').click(()=>{
$.toast('Here you can put the text of the toast')
})
$('.toastPos').click(()=>{
$.toast({
heading: 'Positioning',
text: 'Specify the custom position object or use one of the predefined ones',
position: 'bottom-left',
stack: false
})
})
$('.runWarn').click(()=>{
$.toast({
heading: 'Warning',
text: 'Now you can seemlessly generate warnings using the icon property in the options',
icon: 'warning'
})
})
$('.runErr').click(()=>{
$.toast({
heading: 'Error',
text: 'An unexpected error occured while trying to show you the toast! ..Just kidding, it is just a message, toast is right in front of you.',
icon: 'error'
})
})
$('.runInfo').click(()=>{
$.toast({
heading: 'Information',
text: 'Now you can add icons to the toasts as well.',
icon: 'info'
})
})
$('.runColor').click(()=>{
$.toast({
heading: 'Colors',
text: 'Colors are specified using `bgColor` and `textColor` properties.',
bgColor: '#FF1356',
textColor: 'white'
})
})
$('.runCenter').click(()=>{
$.toast({
heading: 'Positioning',
text: 'Use the predefined ones, or specify a custom object',
position: 'bottom-center',
stack: false
})
})
<div class="container">
<div class="row">
<div class="col-md-5 offset-md-4 mt-5">
<div class="card">
<div class="card-body">
<h4 class="mb-2">Jquery Toast Plugin Demo</h4>
<button class="btn btn-success btn-block mt-2 runTost">Run Toast</button>
<button class="btn btn-success btn-block mt-2 toastPos">Tost Position</button>
<button class="btn btn-warning btn-block mt-2 runWarn">Run Warning</button>
<button class="btn btn-info btn-block mt-2 runInfo">Run Info</button>
<button class="btn btn-success btn-block mt-2 runColor">Custom Text Color</button>
<button class="btn btn-success btn-block mt-2 runCenter">Toast Bottom Center</button>
</div>
</div>
</div>
</div>
</div>