Create Fixed Notifications With Bootstrap Alerts - show-notification

Create Fixed Notifications With Bootstrap Alerts - show-notification
File Size: 7.18 KB
Views Total: 189
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

A simple-to-use jQuery/Bootstrap plugin that makes use of Bootstrap alerts component to dynamically create fixed, dismissable, stackable notification popups in the upper right corner of the page.

How to use it:

1. Load the bootstrap-show-notification.js script in your Bootstrap project.

<!-- Bootstrap Files -->
<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/cdn/bootstrap.min.js"></script>
<!-- Bootstrap Files -->
<script src="/path/to/src/bootstrap-show-notification.js"></script>

2. Display a basic alert notification on the page.

$.showNotification({
  body: "A Basic Notification"
})

3. HTML content is supported as well.

$.showNotification({
  body: "<h3>A Basic Notification</h3>"
})

4. Determine the notification type:

  • primary (default)
  • secondary
  • success
  • danger
  • warning
  • info
  • light
  • dark
$.showNotification({
  body: "A Basic Notification",
  type: "warning"
})

5. Determine how long it takes to auto dismiss. Default: 5500ms.

$.showNotification({
  body: "A Basic Notification",
  duration: 3000
})

6. Determine the stack direction. Default: 'prepend'.

$.showNotification({
  body: "A Basic Notification",
  direction: "append"
})

7. Customize the appearance of the notification popup.

$.showNotification({

  // max width
  maxWidth: "520px",

  // box shadow
  shadow: "0 2px 6px rgba(0,0,0,0.2)", 

  // z-index
  zIndex: 100,

  // margin
  margin: "1rem"
  
})

Changelog:

2020-09-05

  • v1.0.6: code improvement: add disable for duration

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