This library allows you create toasts by JavaScript.
npm install bootstrap-toasts-js --save
- jsDelivr
<script src="https://cdn.jsdelivr.net/npm/bootstrap-toasts-js/dist/js/bootstrap-toasts-js.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap-toasts-js/dist/js/bootstrap-toasts-js.min.js"></script>
<script src="path/to/bootstrap-toasts-js.min.js"></script>
// Toast box
$('body').addToast({content: 'Hello world!', title: 'First Toast'});
// Toast confirm box
$('#example2').addConfirmToast({buttons: [{content: 'Yes', onClick: () => {alert('Thanks!!')}},{content: 'Definitely yes!', onClick: () => {alert('Thanks you so much!!')}, type: 'danger'}],content: 'Do you like bootstrap-toasts-js?', title: 'Question of life', type: 'success'});
https://kubax2000.github.io/bootstrap-toasts-js/
- autoDestroy: boolean (default: false) - Enable toast remove after displayTime
- autoHide: boolean (default: false) - Enable toast hide after displayTime
- closable: boolean (default: true) - Show close button
- closeAction: string (default: "destroy") ["destroy","hide"] - Is toast will have button to close
- content: string (required) - Content of toast
- closeAction: Date (default: new Date()) - Used to display time difference
- displayTime: number (default: 2000) - Time in milliseconds over which will be displayed toast
- elementId: string (default: "toast-" + currentId) - Id of toast box
- fadeOutAnimation boolean (default: true) - Show fade out animation
- fadeOutDelay: number (default: 500) - Time in milliseconds of fade out animation
- headerClasses: function (default: function) - Function returning header classes based on toast type; Used to select right header text color
- iconClass: string (default: null) - Class of span in header. Used to icons.
- iconImgSrc: string (default: null) - Path to image
- iconImgStyles: string (default: "height: 20px; width: 20px;") - Style of image icon
- lang: string (default: "en") - Language of add time
- onAutoClose: function (default: null) - Function called on auto close
- onClose: function (default: null) - Function called on close (cause by close button)
- onHide: function (default: null) - Function called on hide (auto close or close)
- progress: object - Close progressbar options
- animated: bool (default: false) - Enable progress bar animation
- bgColor: string (default: null) - Progress bar background color
- show: bool (default: true) - Show progress bar
- stripped: bool (default: false) - Enable stripped look of progress bar (bootstrap`s "progress-bar-striped")
- type: string (default: "primary") ["success","warning","danger",...] - Type of progress bar
- show: boolean (default: true) - Show toast
- showTimeLabel: boolean (default: true) - Show add time label
- title: string (required) - Title of toast
- type: string (default: "default") ["success","warning","danger",...] - Type of toast
- buttons: array - Array of options objects
- content: string (required) - Content of button
- default: boolean (default: true) - On click function is used on close
- onClick: function (default: null) - Function called on click
- type: string (default: "primary") ["success","warning","danger",...] - Type of button
- buttonsAlign: string (default: "right") - Align of buttons