Custom Bootstrap 4 Toasts In jQuery - toastyMostly

File Size: 7.28 KB
Views Total: 816
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Custom Bootstrap 4 Toasts In jQuery - toastyMostly

toastyMostly is a lightweight and easy jQuery plugin that simplifies the process of creating and updating Bootstrap 4 powered toast notifications on the web app.

See also:

How to use it:

1. Download and import the toastyMostly.min.js script into the Bootstrap project.

<!-- Bootstrap stylesheet -->
<link rel="stylesheet" href="/path/to/bootstrap.min.css">
<!-- jQuery + Bootstrap JS -->
<script src="/path/to/jquery.slim.min.js"></script>
<script src="/path/to/bootstrap.min.js"></script>
<!-- toastyMostly plugin -->
<script src="/path/to/toastyMostly.min.js"></script>

2. Create a new toastyMostly instance and pass the options as per your needs:

  • delay: auto dismiss the toast after this timeout
  • autohide: enable/disable auto dismiss
  • animation: enable/disable CSS animations
  • style: default CSS styles
let myToast = toastyMostly({
    delay: 2000, 
    autohide: true, 
    animation: true,
    style: {
      'position': 'fixed', 
      'top': '100px', 
      'right': '0', 
      'height': '0', 
      'z-index': '2000', 
      'width': '250px'
    }
});

3. Send a toast message to the end user. Available config options:

  • time: small text displayed in the upper right corner of the toast
  • title: toast title
  • body: toast message
  • class: extra classes
  • id: unique ID
  • closeBtn: show close button 
  • append: appends or prepends the toast
  • delay: overrides the global delay option
  • autohide: overrides the global autohide option
  • animation: overrides the global animation option
let singleToast = myToast.send({
    time: null, 
    title: null, 
    body: null, 
    class: null, 
    id: null, 
    closeBtn: true, 
    append: true,
    delay: 2000, 
    autohide: true, 
    animation: true
});

4. Update an already generated toastyMostly toast. Passing the returned id from the send() and an optional config object. Available config options:

  • time: small text displayed in the upper right corner of the toast
  • title: toast title
  • body: toast message
  • addClass: extra classes
  • removeClass: removes a class from the toast
let singleToast = myToast.send({
    time: null, 
    title: null, 
    body: null, 
    addClass: null, 
    removeClass: null
});

This awesome jQuery plugin is developed by rogerthomas84. For more Advanced Usages, please check the demo page or visit the official website.