
The jQuery Toast plugin makes it easier to create customizable toast-style temporary alert messages on the webpage using Bootstrap 4 toasts component.
The plugin gives you the ability to quickly and dynamically create Bootstrap 4 toasts without writing any HTML codes.
See also:
How to use it:
1. Insert the stylesheet toast.min.css
and JavaScript toast.min.js
into the Bootstrap 4 project.
<!-- CSS --> <link rel="stylesheet" href="/path/to/bootstrap.min.css"> <link rel="stylesheet" href="/path/to/toast.min.css"> <!-- JavaScript --> <script src="/path/to/jquery.min.js"></script> <script src="/path/to/popper.min.js"></script> <script src="/path/to/bootstrap.min.js" ></script> <script src="/path/to/toast.min.js"></script>
2. Create the Bootstrap toasts with the following parameters:
- title: alert title
- subtitle: subtitle
- content: alert message
- type: 'info', 'success', 'warning', 'error'
- delay: auto dismiss after this timeout
$.toast({ title: 'Notice!', subtitle: '11 mins ago', content: 'This is a toast message.', type: 'info', delay: 3000 });
3. Remove the toast notification from the DOM.
$(document).on('hidden.bs.toast', '.toast', function (e) { $(this).remove(); });
This awesome jQuery plugin is developed by Script47. For more Advanced Usages, please check the demo page or visit the official website.
- Publication date: 20.02.2019
- Source